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!

Have you seen the three dots before: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — doctorlove
– doctorlove, Commented Jul 5, 2018 at 12:16
I just wasn't clear whjich bit of the expression was tripping you up - but the answer you got has walked through it all. — doctorlove
– doctorlove, Commented Jul 5, 2018 at 12:27

Jonas Wilms · Accepted Answer · 2018-07-05 12:26:02Z

6

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}/>
 )

edited Jul 5, 2018 at 12:26

answered Jul 5, 2018 at 12:15

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Michael Over a year ago

Thank you so much. you put it in simple but clear words! thanks :)

Jonas Wilms Over a year ago

@michael glad to help :)

uniqueok · Accepted Answer · 2020-06-22 10:45:54Z

0

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"]

answered Jun 22, 2020 at 10:45

uniqueok

216 bronze badges

Collectives™ on Stack Overflow

Object into Array conversion

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related