Javascript - React destructuring array

Question

I am trying to learn ReactJS and I'm having some trouble understanding the destructuring occurring in the following snippet:

const IngredientsList = ({ list }) =>  
    React.createElement('ul', null,
      list.map((ingredient, i) =>
        React.createElement('li', {key: i}, ingredient))

const Ingredients = React.createFactory(IngredientsList)
const list = [
     "1 lb Salmon",
     "1 cup Pine Nuts",
     "2 cups Butter Lettuce",
 ]

This should be equivalent to:

 const IngredientsList = props =>
  ....
     props.list.map(...)

I thought only on an object such a destructuring is available. Can you shed some light how the two of above are equivalent? Is it something specific to react?

props is an object. list is an array passed down to the component in props. — Andy
– Andy, Commented Aug 11, 2017 at 23:12

Ignacio · Accepted Answer · 2017-08-12 02:03:34Z

1

Let's format your example and add one extra line to show how to use it:

const IngredientsList = ({list}) => {
  return React.createElement("ul", null, list.map((ingredient, i) => {
    return React.createElement("li", {key: i}, ingredient)
  }))
}

const Ingredients = React.createFactory(IngredientsList)
const list = [
  "1 lb Salmon",
  "1 cup Pine Nuts",
  "2 cups Butter Lettuce",
]

// usage:
Ingredients({list})

As you can see, what you pass to Ingredients is the props Object. The same object can be destructured as the argument of the IngedientsList function.

You can find in this explanation another example of using React.createFactory, again: passing an object which contains the props.

answered Aug 12, 2017 at 2:03

Ignacio

6885 silver badges17 bronze badges

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

Collectives™ on Stack Overflow

Javascript - React destructuring array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related