Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

How to pass prop of a child to another child? (React Hooks)

$
0
0

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:

JSON file


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>