could you guys please advise why my recipeById state is not being updated even tough i already set the state with the correct value response.data.meals
im able to see the value on response.data.meals but recipeById is always undifined
App.js
const searchRecipe = async (id) => {
try {
setRecipeLoading(true);
console.log("searchResult idmeal", id);
const response = await api.get(`lookup.php?i=${id}`);
console.log(response);
console.log("response", response.data.meals);
setRecipeById(response.data.meals);
} catch (error) {
console.log("error", error.message);
} finally {
console.log("searchRecipe done");
setRecipeLoading(false);
}
};
SearchResult.js
function SearchResult({ searchResult, handleOpen, searchRecipe }) {
//const { idMeal } = useParams;
return (
<>
{searchResult.map((item) => (
<div className="topic" id={item.idMeal}>
<h2 className="topic-name">{item.strMeal}</h2>
<nav>
<Link to={item.idMeal} key={item.idMeal}>
<img
onClick={() => {
searchRecipe(item.idMeal);
handleOpen();
}}
style={{ width: "80%" }}
src={item.strMealThumb}
alt={item.idMeal}
/>
</Link>
</nav>
</div>
))}
</>
);
}
i tried multiple solution but recipeById is always undifined which is really weird