En mi programa de reacción, hice un DrinkList.js en el que muestro las imágenes de la bebida. pero cuando empiezo, se puede hacer clic con Onclick y pasar una función para mostrar su nombre en la consola. el error comienza a inundar.
import React from "react"; // import index from "./src" const DrinkList = (props) => { const handleTextShow = (drinkDetail) => { console.log(drinkDetail.strGlass); }; return ( <> {props.drinks.map((drink, index) => ( <div> <img src={drink.strDrinkThumb} alt="drink" width="300" height="300"> {/* hello */} onClick={() => handleTextShow(handleTextShow)} </img> {/* <h4> {drink.strInstructions} </h4> */} {/* <Details /> */} </div> ))} </> ); }; export default DrinkList;decir strGlass es detalle strDrinkThumb es foto.
El problema es que, en la función handleTextShow, en lugar de pasar el nombre de la bebida para querer consolar, está pasando la función handleTextShow como argumento, para resolverlo, reemplace el argumento handleTextShow con el nombre de la bebida,
onClick={() => handleTextShow(drink.name)}