Q:

Button Click to Render Div

I want to click the button and render its corresponding div. Should I add the the div's info that I want to render to the state?
I'm sure there's a few different ways to solve this but I want to do it the React way and maybe as a function component?
Updated
       export default function About(props) (
        const [isHidden, setIsHidden] = useState(true);

        const handleClick = () => {
        setIsHidden(!isHidden);
        };
         return (

       <div className="row justify-content-md-center">
        <div className="col-auto">
          <CustomButton onClick={handleClick}>Website Develpment</CustomButton>
        </div>
        <div className="col-auto">
          <CustomButton onClick={handleClick}>Wordpress Develpment</CustomButton>
        </div>
        <div className="col-auto">
          <CustomButton onClick={handleClick}>Ecommerce Development</CustomButton>
        </div>
      </div>

      <div className="row">
        <div className="col-md-4">column 1</div>
        <div className="col-md-4">column 2</div>
        <div className="col-md-4">column 3</div>
      </div>
     );
    )

A:

This is how I solved it. Thanks for your help!
export default function About() {
  const [visibleItem, setVisibleItem] = useState(1);

  const [priceItems] = useState([
    {
      id: 1,
      name: "website",
    },
    {
      id: 2,
      name: "wordpress",
    },
    {
      id: 3,
      name: "ecommerce",
    },
  ]);

  const handleClick = (id) => {
    setVisibleItem(id);
  };
  return (
    <div className="container-fluid pricing-wrapper">
      <div className="row">
        <div className="col">
          <h1>Pricing</h1>
        </div>
      </div>

      <div className="row">
        <div className="col">
          <p>Innovation that empowers your team while also reducing risk!</p>
          <div className="seperator"></div>
        </div>
      </div>

      <div className="row justify-content-md-center">
        <div className="row justify-content-md-center">
         {priceItems.map((item) => (
           <div className="col-auto">
              <CustomButton onClick={() => setVisibleItem(item.id)}>
               {item.name}
              </CustomButton>
          </div>
         ))}
          </div>
      </div>

      {priceItems
        .filter((item) => item.id === visibleItem)
        .map((item) => (
          <PriceItem item={item} />
        ))}
    </div>
  );
}

