passing content of card from one page to other in react

Question

I'm new to react can somebody please tell me how can I pass the content of the card from one page to another. So basically what I wanna do is that I have few cards when I click on that card I want the information of card such as description and image should be displayed on the redirected page and the redirected page will always be the same only i.e, the content will change as I click on any card.

<CardItem src="images/abc.jpg"
         text="something about the image"
         label="Adventure"
         path="/info"
            />

Answer 1

you can have a parent component that returns a CardItem or a div containing that card info. so you can use the exact same card, have access to various data and also change state (variable) based on user interactions and show the desired page based on each card. for example, if you want to change text value you can use:

const Parent = ()=>{
const [text, setText] = useState("something about the image");
const [showPage, setShowPage] = useState(false);
return showPage?
<div>YOUR PAGE </div>
:
(<CardItem src="images/abc.jpg"
         text=text 
         label="Adventure"
         path="/info"
         onClick = {()=>{
setShowPage(!showPage);
setText("nextPage"); //you can have an array for this
}}
            />);
}