Llamé a una API y luego escogí y dije bebidas. Elegí el nombre de la bebida y las imágenes. Ahora necesito encontrar los detalles sobre esa bebida. Al hacer clic en esta imagen, se muestra sobre eso. que todos estos piensan que están presentes en la API. Pero no sé cómo hacerlo.
import React from "react"; const DrinkList = (props) => { // const handleTextShow return ( <> {props.drinks.map((drink, index) => ( <div> <img src={drink.strDrinkThumb} alt="drink" width="300" height="300" onClick={handleTextShow} ></img> </div> ))} </> ); }; export default DrinkList;strDrinkThumb muestra una foto sobre eso y los detalles son strDetails.
Simplemente pase strDetails a su función handleTextShow
const DrinkList = (props) => { const handleTextShow = (drinkDetail) => { console.log(drinkDetail) } return ( <> {props.drinks.map((drink, index) => ( <div> <img src={drink.strDrinkThumb} alt="drink" width="300" height="300" onClick={() => handleTextShow(drink.strDetails)} ></img> </div> ))} </> ); }; export default DrinkList;