using useStates in js react how to display one div at a time-CodePudding

I have 3 divs and 3 buttons that were created through styled components is react js, and I want to know how to display one div by default when the page loads, and when the user clicks the other two buttons I want that div to display and the other divs to disappear using useStates.

this is what I thought of doing creating useState and a function with a parameter of "displayDiv" and maybe pass the selected div as a argument through a click of one of the buttons, but I don't know how to go about doing it.

const Maincontainer = styled.div`
    border: 1px solid black;
`
const Divbtncontainer = styled.div`
    border: 1px solid black;
    display: flex;
    justify-content: center;
`
const Div1btn = styled.button`
    border-radius: 20px;
    margin-right: 10px;
    background: #D3D3D3;
    width: 15%;
    cursor: pointer;
    &:hover{
        background: #1B1212;
        color: cyan;
        transition: ease-in-out 0.3s;
    }
`
const Div2btn = styled.button`
    border-radius: 20px;
    margin-right: 10px;
    background: #D3D3D3;
    width: 15%;
    cursor: pointer;
    &:hover{
        background: #1B1212;
        color: cyan;
        transition: ease-in-out 0.3s;
    }
`
const Div3btn = styled.button`
    border-radius: 20px;
    margin-right: 10px;
    background: #D3D3D3;
    width: 15%;
    cursor: pointer;
    &:hover{
        background: #1B1212;
        color: cyan;
        transition: ease-in-out 0.3s;
    }
`
const Divscontainer = styled.div`
    display: flex;
    justify-content: center;

`
const Div1 = styled.div`
    text-align: center;
    border: 1px solid black;
`
const Div2 = styled.div`
    text-align: center;
    border: 1px solid black;
`
const Div3 = styled.div`
    text-align: center;
    border: 1px solid black;
`


    function App() {
     const [visableDiv, setVisableDiv] = useState();   
            function setDivToVisable(displayDiv){
                setVisableDiv(displayDiv)
            }
                  <Maincontainer>
                    <Divbtncontainer>
                        <Div1btn>
                            Div 1
                        </Div1btn>
                        <Div2btn>
                            Div 2
                        </Div2btn>
                        <Div3btn>
                            Div 3
                        </Div3btn>
                    </Divbtncontainer>
                    <Divscontainer>
                        <Div1>
                            <h2>This is div 1 </h2>
                        </Div1>
                        <Div2>
                            <h2>This is div 2 </h2>
                        </Div2>
                        <Div3>
                            <h2>This is div 3 </h2>
                        </Div3>
                    </Divscontainer>
                </Maincontainer>
    
    }

CodePudding user response：

You can manage using conditional rendering.

 function App() {
  const [visableDiv, setVisableDiv] = useState("Div 1");

  const setDivToVisable = (displayDiv) => {
    setVisableDiv(displayDiv);
  };

  <Maincontainer>
    <Divbtncontainer>
      <Div1btn onClick={() => setDivToVisable('Div 1')}>Div 1</Div1btn>
      <Div2btn onClick={() => setDivToVisable('Div 2')}>Div 2</Div2btn>
      <Div3btn onClick={() => setDivToVisable('Div 3')}>Div 3</Div3btn>
    </Divbtncontainer>
    <Divscontainer>
      {visableDiv === "Div 1" && (
        <Div1>
          <h2>This is div 1 </h2>
        </Div1>
      )}
      {visableDiv === "Div 2" && (
        <Div2>
          <h2>This is Div 2 </h2>
        </Div2>
      )}
      {visableDiv === "Div 3" && (
        <Div3>
          <h2>This is div 3 </h2>
        </Div3>
      )}
    </Divscontainer>
  </Maincontainer>;
}

CodePudding user response：

no duplicate code and you can add as many divs as you like:


import {useState } from 'react'
const divs = [
  <div>
      <h2>This is div 1 </h2>
  </div>,
  <div>
      <h2>This is div 2 </h2>
  </div>,
  <div>
      <h2>This is div 3 </h2>
  </div>,
];
export const App= () => {
  const [visibleDivIndex, setVisibleDivIndex] = useState(0);

  return (
      <div>
          <div id="container">
              {divs.map((_, index) => (
                  <button onClick={() => setVisibleDivIndex(index)}>
                      Div {index   1}
                  </button>
              ))}
          </div>
          <div>{divs[visibleDivIndex]}</div>
      </div>
  );
};