Used an api and then making visible only the photo part menas drink and on click user can see the detail of that.
strGlass and strDrinkThumb is from api. but not running.

commenting the onclick part work fine.

now by using onlick function vanish all thing

import React from "react";

// import index from "./src"

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">
            {/* hello */}
            onClick={() => handleTextShow(drink.strGlass)}
          </img>
          {/* <h4> {drink.strInstructions} </h4> */}

          {/* <Details /> */}
        </div>
      ))}
    </>
  );
};

export default DrinkList;