score:0

try this:

function tabscomponant(props) {
  const [itemone, setitemone] = usestate(false);
  const [itemtwo, setitemtwo] = usestate(false);

  return (
    <div>
      {itemone && <div classname="item1">item1 info</div>}
      {itemtwo && <div classname="item2">item2 info</div>}
      <button onclick={() => setitemone(!itemone)}>item 1</button>
      <button onclick={() => setitemtwo(!itemtwo)}>item 2</button>
      {itemone && <div classname="item1">item1 data</div>}
      {itemtwo && <div classname="item2">item2 data</div>}
    </div>
  );
}

sandbox

score:1

by searching online e.g. for "react tab component", you can find the following:

by looking at these tutorials, you will find that you can usestate to keep track of the currently active tab and change the state accordingly once one of your buttons gets pressed. depending on the state, you can then show or hide your other components.


Related Query

More Query from same tag