Estoy tratando de redirigir mealContainer a Meals para mostrar detalles de esos datos. Por cierto, estoy usando MealDB para la API. Pero el problema es que cuando hago clic en div de categorías de comida para mostrar detalles, a veces se vuelve nulo y otras veces muestra los datos. No sé por qué ha sucedido. Entonces, estoy tratando de mostrar una advertencia cuando será nulo usando el operador ternario. ¿Cómo puedo hacer eso?
import React, { useState } from "react"; import Meals from "../Meals/Meals"; import "./MealCategory.css"; const MealCategory = ({ mealCategory }) => { const { strCategory, strCategoryThumb } = mealCategory; const [mealsContainer, setMealsContainer] = useState([]); const handleOnClick = (e) => { e.preventDefault(); const categoryName = e.target.innerText; const categoryUrl = `https://www.themealdb.com/api/json/v1/1/filter.php?c=${categoryName}`; fetch(categoryUrl) .then((res) => res.json()) .then((data) => setMealsContainer(data.meals)); // .then(data => console.log(data)) }; return ( <div> <div onClick={handleOnClick} className="col py-3 text-center"> <div className="card d-flex flex-row align-items-center"> <div className="img"> <img src={strCategoryThumb} className="card-img-top" alt="..." /> </div> <div className="card-body"> <h1 className="card-title fs-2">{strCategory}</h1> </div> </div> </div> {mealsContainer.map((meals) => ( <Meals meals={meals} /> ))} </div> ); }; export default MealCategory;Como está diciendo, a veces obtiene null , por lo que incluso si usa el operador ternario dentro del map , también obtendrá un error ya que no puede ejecutar el mapa en una matriz que se evalúa como null . Sí, si su preocupación es cómo usar el operador ternario dentro del mapa, entonces:
{mealsContainer ? mealsContainer.map(meals => <Meals meals={meals} />) : <p>Error loading data!</p> }