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.

Answer 1

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>

Answer 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>