Mapping array inside array with React

Question

I have a database in MongoDB and one of the props in the document contains an array. I'm trying to map the collection in the client-side using React using this code:

<div>
    <h2>Recipes</h2>
    <ul>
        {this.state.recipes.map(recipe =>
            <li key={recipe._id}>
                {recipe.title}<br/>{recipe.category}<br/> 
                {recipe.ingredients}<br/>{recipe.preparation}
            </li>
        )}
    </ul>
</div>

ingredients prop is an array and I want to map it too. How can I do it? Any help would be great, thanks!

How the data looks like? Interested especially what the recipe.ingerdients contains. — norbitrial
– norbitrial, Commented Oct 1, 2020 at 12:14
I guess changerecipe.ingredients to {recipe.ingredients.map((ingredient) => (<p>{ingredient}</p>))} — pbialy
– pbialy, Commented Oct 1, 2020 at 12:19
Hi, It would be better if you include all codes from that module you have problem with — German
– German, Commented Oct 1, 2020 at 12:19

szczocik · Accepted Answer · 2020-10-01 12:47:00Z

4

Just map it the same way you do with recipes

<div>
    <h2>Recipes</h2>
    <ul>
        {this.state.recipes.map(recipe =>
            <li key={recipe._id}>
                {recipe.title}<br/>
                {recipe.category}<br/> 
                {recipe.ingredients.map(ingredient => (
                   <span>{ingredient}</span>
                ))}
                <br/>{recipe.preparation}
            </li>
        )}
    </ul>
</div>

edited Oct 1, 2020 at 12:47

answered Oct 1, 2020 at 12:15

szczocik

1,3431 gold badge8 silver badges19 bronze badges

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

1 Comment

tsahib Over a year ago

Thanks! This is exactly what I've needed! I'll just add that in the span tag the ingredient should be surrounded by { }

thelittlemaster · Accepted Answer · 2020-10-01 12:16:55Z

3

just map it again

<div>
    <h2>Recipes</h2>
    <ul>
        {this.state.recipes.map(recipe =>
            <li key={recipe._id}>
                {recipe.title}<br/>
                {recipe.category}<br/> 
                {recipe.ingredients.map(k =>(
                   <span key={k._id}>{k}<span>
                 )<br/>
                {recipe.preparation}
            </li>
        )}
    </ul>
</div>

answered Oct 1, 2020 at 12:16

thelittlemaster

4333 silver badges13 bronze badges

Comments

Surya Kavutarapu · Accepted Answer · 2020-10-01 12:26:49Z

2

<div>
    <h2>Recipes</h2>
    <ul>
        {this.state.recipes.map(recipe =>
            <li key={recipe._id}>
                {recipe.title}<br/>{recipe.category}<br/> 
                 {  recipe.ingredients.map(ingredient => 
                    <span>{ingredient}</span>
                  )}                 
                <br/>{recipe.preparation}
            </li>
        )}
    </ul>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

edited Oct 1, 2020 at 12:26

answered Oct 1, 2020 at 12:15

Surya Kavutarapu

1369 bronze badges

1 Comment

szczocik Over a year ago

I think forEach does not return anything, so it won't render?

norbitrial · Accepted Answer · 2020-10-01 12:16:41Z

1

You can also use .map() there by calling recipe.ingredients.map() as the following:

{this.state.recipes.map(recipe =>
    <li key={recipe._id}>
        {recipe.title}<br/>{recipe.category}<br/> 
        {
           recipe.ingredients.map((elem, index) => 
             <div key={index}>
                {elem /* or maybe elem['your-property-name'] if it's not a string */}
             </div>
           )
        }<br/>{recipe.preparation}
    </li>
)}

Also don't forget to add key={index} there to avoid the warning based on Lists and Keys.

answered Oct 1, 2020 at 12:16

norbitrial

15.2k10 gold badges39 silver badges66 bronze badges

1 Comment

nir shabi Over a year ago

You should add index as key to avoid the warning, you should add a unique key to avoid bugs on the ui. if you don't put a key, React automatically uses index as a key. If ingredients is a Set of ingredients he should use key={elem}. If not he should use a unique key.

Collectives™ on Stack Overflow

Mapping array inside array with React

4 Answers 4

1 Comment

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related