How to make image clickable and redirect to its introduction value page in Reactjs

Question

I have called an api then pick let says drinks. i picked drink name and images. Now i need to find the details about that drink.On clicking in this image it show about that . which all these think are present in the api. But i dont know how to do it.

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 shows photo about that and details be strDetails.

Answer 1

Just pass strDetails to your handleTextShow function

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;