Creating list of objects from JSON fetch in React app

Question

I'm a bit stumped about how to go about this problem. I am trying to get data for ingredients for a specific recipe from my db and then display them in an ingredients component in my React app.

I get the data using a fetch call to my backend and it is easy enough to get the title and blurb for recipe using the following:

But when it comes to putting together the ingredient/quant/measure (which I assume would best be done via objects) I am lost. Just hoping for some assistance with this problem. Here is the JSON response:

0:
  id: 11
  ingredient_id: 11
  ingredient_name: "lemon"
  measure: "cups"
  quantity: "2"
  recipe_blurb: "Delicious"
  recipe_id: 6
  recipe_name: "Bolognese"
  [[Prototype]]: Object
1:
  id: 12
  ingredient_id: 12
  ingredient_name: "garlic"
  measure: "cloves"
  quantity: "5"
  recipe_blurb: "Delicious"
  recipe_id: 6
  recipe_name: "Bolognese"
  [[Prototype]]: Object
2:
  id: 13
  ingredient_id: 13
  ingredient_name: "butter"
  measure: "g"
  quantity: "500"
  recipe_blurb: "Delicious"
  recipe_id: 6
  recipe_name: "Bolognese"
  [[Prototype]]: Object
length: 3
[[Prototype]]: Array(0)

Here is the React code:

export default function GetRecipe() {
  const [name, setName] = useState('')
  const [recipeInfo, setRecipeInfo] = useState([])

//fetch
  const retrieveRecipe = function (e) {
    e.preventDefault()
    console.log(name)
    fetch(`http://localhost:3001/getjoinedrecipes/?name=${name}`, {
      method: 'GET',
      headers: { 'Content-type': 'application/json' },
    })
      .then((resp) => resp.json())
      .then((json) => {
        let result = json
        setRecipeInfo(result)
      })
  }

  return (
    <div>
      [...]
      <div>
        <PageContainer
          recipeName={recipeInfo.length ? recipeInfo[0].recipe_name : ''}
          recipeBlurb={recipeInfo.length ? recipeInfo[0].recipe_blurb : ''}
          //insert method here
        ></PageContainer>
      </div>
    </div>
  )
}

Also if it is helpful - here is the ingredientnamequant component where the ingredients will end up - not sure how to dynamically create additional elements for each ingredient in the recipe...

import './IngredientNameQuant.css'

function IngredientNameQuant() {
  return (
    <div>
      <div className="ingredient-quantity"></div>
      <div className="ingredient-measure"></div>
      <div className="ingredient-name"></div>
    </div>
  )
}

export default IngredientNameQuant

Answer 1

Here's what I did, seems to work:

let ingredientList = []
        for (let i = 0; i < result.length; i++) {
          const ingObject = {
            name: result[i].ingredient_name,
            quantity: result[i].quantity,
            measure: result[i].measure,
          }
          ingredientList.push(ingObject)