https://codesandbox.io/s/tab-type-ui-lfmokg I wanted to create a simple Tab type script for below html structure. on click of Button Item 1 , only div className="item1 infosection" and div className="item1 Data" should visible. on click of Button Item 2 , only div className="item2 infosection" and div className="item2 Data" should visible. Please Help

<div>
      <div className="item1 infosection">item1 Info</div>
      <div className="item2 infosection">item2 Info</div>
      <Button>Item 1</Button>
      <Button>Item 2</Button>
      <div className="item1 Data">item1 Data</div>
      <div className="item2 Data">item2 Data</div>
    </div>

CodePudding user response：

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

• https://www.digitalocean.com/community/tutorials/react-tabs-component
• https://blog.logrocket.com/how-to-build-tab-component-react/

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.

CodePudding user response：

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