i am stuck with a json exporting database. it generates json data in the following format.
{"Drinks":[
{
"name":"name",
"discription":"discription",
"image":"image",
"ingredients":"['ingredients1', 'ingredients2']",
"instructions":"instructions",
"author":"author"
}
]}
currently, i am using the .map function to display all the content, but i am facing an issue when trying to extract and display ingredients separately. i tried nesting another .map function inside the first one, but unfortunately, i encountered this error:
TypeError: p.ingredients.map is not a function
here is the problematic code snippet
<ul>
<div className="grid">
{Drinks.map(p => (
<a className="card_red">
<h3>{p.name}</h3>
<p>
<b> {p.discription} <br/> <br/> </b>
{
p.ingredients.map(i => ( <b> {i} <br/> <br/> </b>
))}
<b> {p.ingredients} <br/> <br/> </b>
<b> {p.instructions} <br/> <br/> </b>
<b> {p.up_votes} <br/> <br/> </b>
<b> {p.downvotes} <br/> <br/> </b>
<b> {p.author} <br/> </b>
</p>
</a>
))}
</div>
</ul>
when the second .map function is removed, the output looks like this
i am aiming for an output similar to this