I need to pass a prop (it's a unique id) from one child component to another, but I can't do it.
The operation is simple: Homepage is the parent and has two direct children: Gallery and Detail. Gallery using a map prints its children Cards, which have a unique id. I need that when clicking on a card button, that unique id can be received by Detail.
I tried to manage it through handleClick but since I already manage a state there, I don't know if it is possible to manage it from there or are other methods.
This is the code:
interface DetailProps {}const Detail: React.FC<DetailProps> = (props) => { return (<div><span className="tituloJuego">DENTRO DE DETAIL</span></div> );};interface CardProps { id: number; image: string; title: string; price: string; onClick: (result: string) => void;}const Card: React.FC<CardProps> = (props) => { return (<div className="card"><img className="image" src={props.image} /><div className="card-info"><div className="containerTitlePrice"><span className="tituloJuego">{props.title}</span><br></br><span className="-USD">{props.price}</span></div><div className="containerButton"><button className="Rectangle" onClick={(event) => props.onClick("detail")}><span className="Install-Game">BUY NOW</span></button></div></div></div> );};interface GalleryProps { onClick: (result: string) => void;}const Gallery: React.FC<GalleryProps> = (props) => { return ( // Se recorren los datos de json con map y se imprime cada card<div className="container"> {data.map((games, key) => { return (<Card id={games.id} image={games.image} title={games.title} price={games.price} onClick={(event) => props.onClick("detail")} /> ); })}</div> );};const Homepage: React.FC = () => { // Por defecto el estado muestra homepage const [currentView, setCurrentView] = React.useState<string>("homepage"); const handleClick = () => setCurrentView("detail"); const [currentClickedGame, setCurrentClickedGame] = React.useState<number>(0); return (<div className="Simplified-homepage"> {currentView === "homepage" ? (<div className="store-gallery"><Gallery onClick={handleClick} /></div> ) : (<div className=""><Detail /></div> )}</div> );};// ========================================ReactDOM.render(<Homepage />, document.getElementById("root"));
Here is the json file. The data from this file is the data that im showing in the Cards. The "ID" is the number that I want to pass from Card to Homepage: