How to make a Tab type simple component in React

user_3927335 0
Viewed 39

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>
reactjs
2 Answers
user_99696720

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

user_166481270
Related