Object into Array conversion

Question

I have this state Object in a class:

state = {
 ingredients: {
 salad: 1,
 bacon: 5, 
 cheese: 2, 
 meat: 2
 }
}

and want to convert it into an array that gets also the value number, like this:

const burger = (props) => {
const transformedIngredients = Object.keys(props.ingredients)
 .map(igKey => {
 return [...Array(props.ingredients[igKey])].map((_,i)=>{
 return <BurgerIngredient key={igKey + i} type={igKey}/>
 });
 });
 console.log(transformedIngredients)
 return(
 <div className={classes.Burger}> 
 <BurgerIngredient type="bread-top" />
 <BurgerIngredient type="cheese" />
 <BurgerIngredient type="meat" />
 <BurgerIngredient type="bread-bottom" />
 </div>
 );
};
export default burger;

I succeeded in doing it following a tutorial and to be honest I do not completely understand what is happening here. especially this part:

return [...Array(props.ingredients[igKey])].map((_,i)=>{
 return <BurgerIngredient key={igKey + i} type={igKey}/>
 });

any help would be greatly appreciated! Thank you!

• doctorlove: Have you seen the three dots before: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
• Michael: yes the spread operator! :)
• doctorlove: I just wasn't clear whjich bit of the expression was tripping you up - but the answer you got has walked through it all.

Answer 1

igKey is one of the keys of your ingredients, bacon for example. Now that is looked up in the ingredients with

 props.ingredients[igKey]

which then results in the amount, 5 in this case. Now that is used to build up an array with that length:

 Array(5) // { length: 5 }

Now that array is a sparse array, it has nothing in it. To be able to iterate over it with map, it has to be filled with not defined values, therefore that sparse array is spread into a new array, which turns it into a filled array:

 [...Array(5)] // { length: 5, 0: undefined, 1: undefined, 2: ... }

Now that empty array with 5 entries will be mapped to an array with 5 Burger ingredients.

---

By the way more elegant IMO:

 Array.from(
 { length: props.infredients[igKey] },
 (_, i) => <BurgerIngredient key={igKey + i} type={igKey}/>
 )

• Michael: Thank you so much. you put it in simple but clear words! thanks :)
• Jonas Wilms: @michael glad to help :)

Answer 2

props.ingredients[igKey]

returns a number, 5 for example for bacon.

[...Array(props.ingredients[igKey])]

returns an array of n elements. Those elements are undefined as you haven't filled them yet.

A solution would be:

[...Array(props.ingredients[igKey])].fill(igKey)

Or simply:

Array(state.ingredients[igKey]).fill(igKey)

That results in:

["salad", "bacon", "bacon", "bacon", "bacon", "bacon", "cheese", "cheese", "meat", "meat"]