used an API. import and in components>DrinkList.js handleTextShow function not running

Question

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.

Answer 1

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)}