How to render components from an array on screen only when the corresponding button is clicked?

Question

I need to show the objects in the array only when its button is clicked. So, I'm adding items to a list when each button is clicked. So I guess I need to add some kind of conditional logic?

const Calc = () => {
  const jobs = [
    { title: "Patio", body: <Patio /> },
    { title: "Fence", body: <Fence /> },
    { title: "Garden", body: <Garden /> },
    { title: "Footing", body: <Foot /> },
    { title: "Deck", body: <Deck /> },
  ];


  const [showOption, setShowOption] = useState(false);
  const optionClickHandler = () => {
    setShowOption(true);
  };

 

  return (
    <div className="Calc">
      <div>
        <BasicMenu />
      </div>

      <button onClick={optionClickHandler}>Footing</button>
      <button>Garden</button>
      <button>Fence</button>
      <button>Patio</button>
      <button>Deck</button>

      <div>
        <div>
          {jobs.map(({ title, body }) => {
            return (
              <div>
                <div>{title}</div>
                <div>{body}</div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

Answer 1

You can use a Set to keep track of the jobs that need to be shown and render the filtered jobs.

const jobs = [
  { title: "Patio", body: <Patio /> },
  { title: "Fence", body: <Fence /> },
  { title: "Garden", body: <Garden /> },
  { title: "Footing", body: <Foot /> },
  { title: "Deck", body: <Deck /> }
];

const Calc = () => {
  const [jobsToShow, setJobsToShow] = useState(new Set());

  const showJob = (jobTitle) => () => {
    setJobsToShow((prev) => new Set(prev).add(jobTitle));
  };

  const filteredJobs = useMemo(() => {
    return jobs.filter((job) => jobsToShow.has(job.title));
  }, [jobsToShow]);

  return (
    <div className="Calc">
      {jobs.map((job) => (
        <button key={job.title} onClick={showJob(job.title)}>
          {job.title}
        </button>
      ))}

      <div>
        <div>
          {filteredJobs.map(({ title, body }) => {
            return (
              <div key={title}>
                <div>title: {title}</div>
                <div>body: {body}</div>
                <hr />
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};