React - How to show an element while hiding the others in React-Hooks

Question

import React, { useState } from "react";
import PlanetInfoCard from "./PlanetInfoCard";

interface PlanetInfosProps {
  planetName: string;
  averageTemperature: string;
  distanceFromSun?: string;
  radius: string;
  svg: string;
  isDisplayed: boolean;
}

const PlanetInfos: React.FC<PlanetInfosProps> = ({
  planetName,
  svg,
  distanceFromSun,
  averageTemperature,
  radius,
  isDisplayed,
}) => {
  const [displayStatus, setDisplayStatus] = useState(isDisplayed);

  const displayPlanetInfo = () => {
    setDisplayStatus(!displayStatus);
  };

  return (
    <div
      onClick={displayPlanetInfo}
      key={planetName}
      className="planet-list__infos"
    >
      <li>
        <img src={svg} alt="planet-logo" /> <p>{planetName}</p>
      </li>
      {displayStatus && (
        <PlanetInfoCard
          key={distanceFromSun}
          planetName={planetName}
          svg={svg}
          distanceFromSun={distanceFromSun}
          averageTemperature={averageTemperature}
          radius={radius}
          isDisplayed={isDisplayed}
        />
      )}
    </div>
  );
};

export default PlanetInfos;

In here each planet has isDisplayed value in their data object. I managed to display them individually, using useState . But I wanna hide other elements while showing one. I tried to create other states and it got messy, couldn't manage to do it.

Answer 1

You could have a state for deciding which element to show.

like: [displayingItem, setDisplayingItem] = useState(oneOfThePlanetNames);

and you could display any planet you want by setDisplayinItem(planetName)

This way only one item displays each time.

{displayingItem === planetName && (
        <PlanetInfoCard
          key={distanceFromSun}
          planetName={planetName}
          svg={svg}
          distanceFromSun={distanceFromSun}
          averageTemperature={averageTemperature}
          radius={radius}
          isDisplayed={isDisplayed}
        />
      )}

Answer 2

You should do it in the parent component where your list of PlanetInfos located.

   [displayedPlanet, setDisplayedPlanet] = useState('');
   const setPlanet = (name: string) => {setDisplayedPlanet(name)}

    return (
      <React.Fragment>
      {listOfPlanets.map((planet) => 
      <div onClick={setPlanet.bind(null, planet.planetName)}>
      {planet.planetName === displayedPlanet && <PlanetInfos planet=planet/>}</div>)}
     </React.Fragment>
)