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

CodePudding user response：

You can pass the state currentClickedGame in both the child components for handling the ID. You can't pass props on components in the same level or from child to parent as react follows unidirectional data flow .Also, instead of passing the handleClick from Homepage you can manage it inside Card component itself and set setCurrentView from there. I've drilled props to 2 levels, consider using context in a more complex case

In HomePage:

return (
    <div className="Simplified-homepage">
      {currentView === "homepage" ? (
        <div className="store-gallery">
          <Gallery setCurrentClickedGame ={setCurrentClickedGame}/>
        </div>
      ) : (
        <div className="">
          <Detail currentClickedGame={currentClickedGame}/>
        </div>
      )}
    </div>
  );

And in Gallery component:

   return (
          <div key={games.id}>
            <Card
              id={games.id}
              image={games.image}
              title={games.title}
              price={games.price}
              setCurrentView={props.setCurrentView}
              setCurrentClickedGame={props.setCurrentClickedGame}
            />
          </div>
        );

View demo on Codesandbox