In my react program i have made a DrinkList.js in which i show the images of drink. but when i start make it clickable using Onclick and passing a function to display its name in console. error start flooding.
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;
say strGlass is detail strDrinkThumb is photo.
The problem is that , in handleTextShow function, instead of passing name of drink to want to console, you're passing handleTextShow function as argument, to solve it replace handleTextShow argument with drink name,
onClick={() => handleTextShow(drink.name)}