Hi everyone I have this project, a recipe web app for me to learn react better
[![enter image description here](https://i.stack.imgur.com/IXtSJ.jpg)](https://i.stack.imgur.com/IXtSJ.jpg)

this is the homepage component where i get the data from the API
[![enter image description here](https://i.stack.imgur.com/Ee4UK.png)](https://i.stack.imgur.com/Ee4UK.png)

Recipes Component: the data from the useState is looped through and passed to the Recipes components
[![Recipes component](https://i.stack.imgur.com/hRvwq.png)](https://i.stack.imgur.com/hRvwq.png)

Now i wanted create a component where when a user clicks on the content it redirect him/her to a new page

[![recipe component](https://i.stack.imgur.com/kPw8G.png)](https://i.stack.imgur.com/kPw8G.png)

. The problem is that i don't know how to pass data from the Recipes component to the Recipe and output them to the area marked by red pen. How do we do this without fetching another API (it's limited) and without using redux. Need help