I want to display some data from my JSON. Specifically I would like to show an innested array and i am stuck using map(). The field I would like to show as a list is analyzedInstructions like this:
How to prep (from p How to prep /p)
Steps:
- Remove the cauliflower's tough stem and reserve for another use. Using a food processor, pulse cauliflower florets until they resemble rice or couscous. You should end up with around four cups of "cauliflower rice.
Ingredients:
- cauliflower florets
- cauliflower rice ecc
Equipment:
- food processor
And so on for steps 2,3,4....
Can you help me please? thank you
{
"pathname": "/recipe/716426",
"search": "",
"hash": "",
"state": {
"meal": {
"vegetarian": true,
"vegan": true,
"glutenFree": true,
"dairyFree": true,
"veryHealthy": true,
"cheap": false,
"veryPopular": true,
"sustainable": false,
"weightWatcherSmartPoints": 4,
"gaps": "no",
"lowFodmap": false,
"aggregateLikes": 3689,
"spoonacularScore": 100,
"healthScore": 76,
"creditsText": "Full Belly Sisters",
"license": "CC BY-SA 3.0",
"sourceName": "Full Belly Sisters",
"pricePerServing": 112.39,
"id": 716426,
"title": "Cauliflower, Brown Rice, and Vegetable Fried Rice",
"readyInMinutes": 30,
"servings": 8,
"sourceUrl": "http://fullbellysisters.blogspot.com/2012/01/cauliflower-fried-rice-more-veggies.html",
"image": "https://spoonacular.com/recipeImages/716426-312x231.jpg",
"imageType": "jpg",
"summary": "Cauliflower, Brown Rice, and Vegetable Fried Rice might be a good recipe to expand your side dish recipe box. Watching your figure? This gluten free, dairy free, lacto ovo vegetarian, and vegan recipe has <b>192 calories</b>, <b>7g of protein</b>, and <b>6g of fat</b> per serving. For <b>$1.12 per serving</b>, this recipe <b>covers 19%</b> of your daily requirements of vitamins and minerals. This recipe serves 8. This recipe from fullbellysisters.blogspot.com has 3689 fans. This recipe is typical of Chinese cuisine. From preparation to the plate, this recipe takes about <b>30 minutes</b>. Head to the store and pick up peas, broccoli, salt, and a few other things to make it today. Overall, this recipe earns an <b>awesome spoonacular score of 100%</b>. Users who liked this recipe also liked <a href=\"https://spoonacular.com/recipes/vegetable-fried-brown-rice-36199\">Vegetable Fried Brown Rice</a>, <a href=\"https://spoonacular.com/recipes/vegetable-fried-cauliflower-rice-933261\">Vegetable Fried Cauliflower Rice</a>, and <a href=\"https://spoonacular.com/recipes/easy-vegetable-fried-brown-rice-with-egg-802042\">Easy Vegetable Fried Brown Rice with Egg</a>.",
"cuisines": [
"Chinese",
"Asian"
],
"dishTypes": [
"side dish"
],
"diets": [
"gluten free",
"dairy free",
"lacto ovo vegetarian",
"vegan"
],
"occasions": [],
"analyzedInstructions": [
{
"name": "",
"steps": [
{
"number": 1,
"step": "Remove the cauliflower's tough stem and reserve for another use. Using a food processor, pulse cauliflower florets until they resemble rice or couscous. You should end up with around four cups of \"cauliflower rice.\"",
"ingredients": [
{
"id": 10011135,
"name": "cauliflower florets",
"localizedName": "cauliflower florets",
"image": "cauliflower.jpg"
},
{
"id": 10111135,
"name": "cauliflower rice",
"localizedName": "cauliflower rice",
"image": "cauliflower.jpg"
},
{
"id": 11135,
"name": "cauliflower",
"localizedName": "cauliflower",
"image": "cauliflower.jpg"
},
{
"id": 20028,
"name": "couscous",
"localizedName": "couscous",
"image": "couscous-cooked.jpg"
},
{
"id": 20444,
"name": "rice",
"localizedName": "rice",
"image": "uncooked-white-rice.png"
}
],
"equipment": [
{
"id": 404771,
"name": "food processor",
"localizedName": "food processor",
"image": "food-processor.png"
}
]
},
{
"number": 2,
"step": "Heat 1T butter and 1T oil in a large skillet over medium heat.",
"ingredients": [
{
"id": 1001,
"name": "butter",
"localizedName": "butter",
"image": "butter-sliced.jpg"
},
{
"id": 4582,
"name": "cooking oil",
"localizedName": "cooking oil",
"image": "vegetable-oil.jpg"
}
],
"equipment": [
{
"id": 404645,
"name": "frying pan",
"localizedName": "frying pan",
"image": "pan.png"
}
]
},
{
"number": 3,
"step": "Add garlic and the white and light green pieces of scallion. Sauté about a minute.",
"ingredients": [
{
"id": 11291,
"name": "green onions",
"localizedName": "green onions",
"image": "spring-onions.jpg"
},
{
"id": 11215,
"name": "garlic",
"localizedName": "garlic",
"image": "garlic.png"
}
],
"equipment": []
},
{
"number": 4,
"step": "Add the cauliflower to the pan. Stir to coat with oil, then spread out in pan and let sit; you want it cook a bit and to caramelize (get a bit brown), which will bring out the sweetness. After a couple of minutes, stir and spread out again.",
"ingredients": [
{
"id": 11135,
"name": "cauliflower",
"localizedName": "cauliflower",
"image": "cauliflower.jpg"
},
{
"id": 0,
"name": "spread",
"localizedName": "spread",
"image": ""
},
{
"id": 4582,
"name": "cooking oil",
"localizedName": "cooking oil",
"image": "vegetable-oil.jpg"
}
],
"equipment": [
{
"id": 404645,
"name": "frying pan",
"localizedName": "frying pan",
"image": "pan.png"
}
]
},
{
"number": 5,
"step": "Add cold rice (it separates easily, so it won't clump up during cooking), plus the additional grapeseed and coconut oil or butter. Raise heat to medium-high. Toss everything together and, again, spread the mixture out over the whole pan and press a bit into the bottom.",
"ingredients": [
{
"id": 4047,
"name": "coconut oil",
"localizedName": "coconut oil",
"image": "oil-coconut.jpg"
},
{
"id": 1001,
"name": "butter",
"localizedName": "butter",
"image": "butter-sliced.jpg"
},
{
"id": 0,
"name": "spread",
"localizedName": "spread",
"image": ""
},
{
"id": 20444,
"name": "rice",
"localizedName": "rice",
"image": "uncooked-white-rice.png"
}
],
"equipment": [
{
"id": 404645,
"name": "frying pan",
"localizedName": "frying pan",
"image": "pan.png"
}
]
},
{
"number": 6,
"step": "Let it sit for about two minutes—so the rice can get toasted and a little crispy.",
"ingredients": [
{
"id": 20444,
"name": "rice",
"localizedName": "rice",
"image": "uncooked-white-rice.png"
}
],
"equipment": [],
"length": {
"number": 2,
"unit": "minutes"
}
},
{
"number": 7,
"step": "Add the peas and broccoli and stir again.",
"ingredients": [
{
"id": 11090,
"name": "broccoli",
"localizedName": "broccoli",
"image": "broccoli.jpg"
},
{
"id": 11304,
"name": "peas",
"localizedName": "peas",
"image": "peas.jpg"
}
],
"equipment": []
},
{
"number": 8,
"step": "Drizzle soy sauce and toasted sesame oil over rice.Cook for another minute or so and turn off heat.",
"ingredients": [
{
"id": 4058,
"name": "sesame oil",
"localizedName": "sesame oil",
"image": "sesame-oil.png"
},
{
"id": 16124,
"name": "soy sauce",
"localizedName": "soy sauce",
"image": "soy-sauce.jpg"
},
{
"id": 20444,
"name": "rice",
"localizedName": "rice",
"image": "uncooked-white-rice.png"
}
],
"equipment": []
},
{
"number": 9,
"step": "Add chopped scallion tops and toss.I like to toast some sesame seeds in a dry pan; I sprinkle these and some more raw, chopped scallion over the top of the rice for added flavor and crunch.Season to taste with salt and, if you'd like, more soy sauce. Keep in mind that if you're serving this with something salty and saucy (ie. teriyaki chicken) you may want to hold off on adding too much salt to the fried rice.",
"ingredients": [
{
"id": 12023,
"name": "sesame seeds",
"localizedName": "sesame seeds",
"image": "sesame-seeds.png"
},
{
"id": 16124,
"name": "soy sauce",
"localizedName": "soy sauce",
"image": "soy-sauce.jpg"
},
{
"id": 11291,
"name": "green onions",
"localizedName": "green onions",
"image": "spring-onions.jpg"
},
{
"id": 5006,
"name": "whole chicken",
"localizedName": "whole chicken",
"image": "whole-chicken.jpg"
},
{
"id": 18070,
"name": "toast",
"localizedName": "toast",
"image": "toast"
},
{
"id": 20444,
"name": "rice",
"localizedName": "rice",
"image": "uncooked-white-rice.png"
},
{
"id": 2047,
"name": "salt",
"localizedName": "salt",
"image": "salt.jpg"
}
],
"equipment": [
{
"id": 404645,
"name": "frying pan",
"localizedName": "frying pan",
"image": "pan.png"
}
]
}
]
}
],
"spoonacularSourceUrl": "https://spoonacular.com/cauliflower-brown-rice-and-vegetable-fried-rice-716426"
}
},
"key": "qqtrw8b0"}
import React from "react";
import Meal from "../Meal";
import { useLocation } from "react-router-dom";
export default function Recipe() {
const location = useLocation();
console.log(location);
return (
<div>
<h1>{location.state.meal.title}</h1>
<img src={location.state.meal.image} alt="recipe"></img>
<p>pricePerServing {location.state.meal.pricePerServing}</p>
<p>readyInMinutes {location.state.meal.readyInMinutes}</p>
<p>servings {location.state.meal.servings} </p>
<p>vegetarian {(location.state.meal.vegetarian) ? "V" : "F"}</p>
{/* <p>diets {location.state.meal.diets.map((key, diet)=>{
return (
<li key={diet}>{key}</li>
)
})}
</p> */}
<p>How to prep</p>
<p>{location.state.meal.analyzedInstructions.map((ai, key)=>{
<ul>
{ai.steps.map((stepp, key)=>{
<li key={key}> {stepp.step}</li>
})}
</ul>
})}</p>
</div>
);
}
CodePudding user response：
Firstly, analyzedInstructions is an array with 1 element. So the code needs to read location.state.meal.analyzedInstructions[0].steps.map.
Secondly, this is a perfect opportunity to make a specialised child component and map to it instead, avoiding the nested jumble of elements and whatnot.
Here's a codesandbox demo. I've used Typescript and @mui/material on it, but that's just because I wanted to make it look neater. Feel free to copy it and remove those parts.