Mapping array inside array with React

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!

Answer

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>