Как отображать данные, поступающие из API, в кнопках React

Question

Я пытаюсь отобразить массив данных, поступающих от каждого вызова API. Допустим, у меня есть API / Fruit и / Pizza API. Я хочу отобразить в табличном формате, который разделен каждым элементом в массиве json. Как бы я сделал это в ответ, учитывая, что код API работает, как ожидалось:

function getFood() {
    const fruitResult = API.get("fruits", "/fruits", params, {
    });
    const pizzaResult = API.get('pizza", "/pizza", params, {

  });
}

Допустим, json:

data: {
  "food": [
    "fruits": [{
       "name":"apple",
       "price":"2.5",
       "weight":"1"
     },
      ...
     ] 
  ]

}

В идеале, я бы хотел цену / вес для кнопок, которые можно нажимать, и это будет выглядеть примерно так:

Answer 1

Поскольку вы не показываете, как выглядит ваш компонент ... Я сделаю вас функциональным компонентом с нуля.

import React, { useEffect, useState } from 'react';
function CustomComponent() {
  const [fruits, setFruits] = useState([]);
  const [pizza, setPizzas] = useState([]);
  useEffect(() => {
    function getOdds() {
      const fruitResult = API.get("fruits", "/fruits", params, {
      });
      const pizzaResult = API.get("pizza", "/pizza", params, {
      });
      return Promise.all([fruitResult, pizzaResult])
    }
    getOdds().then(([fruitsRes, pizzasRes]) => {
      setFruits(fruitsRes);
      setPizzas(pizzasRes);
    });
  }
  return (
    <div>
      {fruits.map(fruit => <button>{fruit}</button>)}
    </div>
  )
}