Estoy haciendo un proyecto en el que busco una imagen de una tarjeta de receta de https://spoonacular.com y quiero que se muestre en mi aplicación react.js. Por alguna razón, no puedo hacer que los datos de la API se muestren en la página cuando la ejecuto. Por favor ayuda estoy realmente atascado
Este es mi Home.js:
import React, { useEffect, useState } from "react"; import axios from "axios"; import Recipe from "../components/Recipes"; const URL = `https://api.spoonacular.com/recipes/4632/card?apiKey=${APIKey}`; function Home() { const [food, setFood] = useState(); useEffect(() => { if (food) { axios .get(URL) .then(function (response) { const recipeList = response.data; setFood(recipeList); }) .catch(function (error) { console.warn(error); }); } }, [food]); return ( <> <main> <Recipe recipeList={food} /> </main> </> ); } export default Home;y esta es mi Receta.js
import React from "react"; function Recipe({ recipeList }) { return ( <section className="RecipeCard"> <div className="Recipe" dangerouslySetInnerHTML={{ __html: recipeList }} /> </section> ); } export default Recipe; <section className="RecipeCard"> {recipeList.map((recipe, index)=> ( <div key={index} className="Recipe"> <h2>{recipe.title}</h2> </div> ))} </section>Además, para facilitar la lectura del código, intente usar la sintaxis async-await para la llamada a la API.
useEffect(()=> { const getRecipeList = async () => { if(food){ try{ const { data } = await axios.get(URL); setFood(data); }catch(error){ console.log(error); } } } getRecipeList(); },[food]);Debe generar el JSON como HTML para que se muestre.
Por ejemplo, obtenga una receta específica: https://api.spoonacular.com/recipes/716429/information?includeNutrition=false
y en el div Componente de Recipe
<div className="Recipe"> {food && <> <div>{food.title}</div> <img src={food.image} /> </>} </div>