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.
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;