Displaying array of objects using map in reactJs

Question

I have 10 Array of objects like this:

I tried to map ingedients and display the text:

    <ul>
        {this.props.data.ingredients.map(function(ingredient,i) { 
        return (<li key={i} item={ingredient}/>)
        })}
   </ul>

I get the result of ten bullets but the text is not being displayed. If I try ingredient.text , it says cannot display text of null.

Thanks in advance.

yotke · Accepted Answer · 2018-08-15 09:45:37Z

2

You are setting item prop with ingredient here.

return (<li key={i} item={ingredient}/>)

Where you probably want to display the text in the li, like this:

<ul>
    {this.props.data.ingredients.map(function(ingredient,i) { 
        return (<li key={i} item={ingredient}>{ingredient.text}</li>
    })}
</ul>

answered Aug 15, 2018 at 9:45

yotke

1,2082 gold badges13 silver badges26 bronze badges

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

3 Comments

PremKumar Over a year ago

Thank you. Tried it and i got a error TypeError: Cannot read property 'text' of null.The value of text is a String

yotke Over a year ago

I made a code sandbox and it works. Take a look codesandbox.io/s/j7w9mrokyw

PremKumar Over a year ago

Thank you, that works great. It was simple mistake made in my end.

Hemadri Dasari · Accepted Answer · 2018-08-15 10:08:16Z

2

You can also do the same in ES6 way

let ingredientsText = [];

{this.props.data.ingredients.map((ingredient,i) => { 
   ingredientsText.push(<li key={i} item={ingredient}>{ingredient.text}</li>);
})}

<ul>
    {ingredientsText}
</ul>

answered Aug 15, 2018 at 10:08

Hemadri Dasari

34.2k41 gold badges125 silver badges166 bronze badges

Collectives™ on Stack Overflow

Displaying array of objects using map in reactJs

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related