component: display BuildControls by iterating the Control objects array

.gitignore

@@ -19,3 +19,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+debug.log

src/components/BuildControls/BuildControls.js

@@ -1,15 +0,0 @@
-import React from 'react'
-
-import BuildControl from './BuildControl/BuildControl';
-import classes from './BuildControls.css';
-
-const buildControls = (props) => (
-    <div className={classes.buildControls}>
-        <BuildControl Name="Meat" />
-        <BuildControl Name="Cheese" />
-        <BuildControl Name="Salad" />
-        <BuildControl Name="Bacon" />
-    </div>
-)
-
-export default buildControls;

src/components/Burger/BuildControls/BuildControls.js

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import BuildControl from './BuildControl/BuildControl';
+import classes from './BuildControls.css';
+
+const controls = [
+    { name: 'Salad', type: 'salad'},
+    { name: 'Cheese', type: 'cheese'},
+    { name: 'Bacon', type: 'bacon'},
+    { name: 'Meat', type: 'meat'},
+];
+
+const buildControls = (props) => (
+    <div className={classes.BuildControls}>
+        {controls.map( ctrl => (
+            <BuildControl Key={ctrl.name} Name={ctrl.name} />
+        ))}
+    </div>
+)
+
+export default buildControls;

src/containers/BurgerBuilder/BurgerBuilder.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 
 import Aux from '../../hoc/Auxiliary';
 import Burger from '../../components/Burger/Burger';
-import BuildControls from '../../components/BuildControls/BuildControls';
+import BuildControls from '../../components/Burger/BuildControls/BuildControls';
 
 class BurgerBuilder extends Component {