How can I toggle between 3 components in ReactJS

Question

I am having a hard time rendering components conditionally in React. I have successfully rendered 2 components (A and B) conditionally but couldn't find any successful way to add a third component (C) in our case

this is the code for 2 componnets:

function App() {
  const [click, setClick] = useState(true);

  const ShowA = () => setClick(true);
  const ShowB = () => setClick(false);

  return (
    <>
      <br />

      <button onClick={ShowA}>A </button>

      <button onClick={ShowB}>B </button>

      <div className="App">
        {click && <div> A </div>}

        {!click && <div>B</div>}
      </div>
    </>
  );
}

Is there any possible way I can add a third C component so I can toggle between them? I have been trying for 2 days but no success.

This is the link of Codesandbox if anyone's interested

https://codesandbox.io/s/musing-tesla-9gkpw?file=/src/index.js:100-481

you can do it like: codesandbox.io/s/hungry-williamson-3tm91?file=/src/index.js — webcoder
– webcoder, Commented Feb 24, 2021 at 1:14
Don’t use a Boolean as that can only allow two states. Maybe use a number which increments and gets reset to 0 if over 2? — evolutionxbox
– evolutionxbox, Commented Feb 24, 2021 at 1:25

Roman Mkrtchian · Accepted Answer · 2021-02-24 01:14:59Z

You can put as many states as you want:

  function App() {
    const [displayA, setDisplayA] = useState(true);
    const [displayB, setDisplayB] = useState(true);
    const [displayC, setDisplayC] = useState(true);

    const showA = () => {
      setDisplayA(true);
      setDisplayB(false);
      setDisplayC(false);
    }
    const showB = () => {
      setDisplayA(false);
      setDisplayB(true);
      setDisplayC(false);
    };
    const showC = () => {
      setDisplayA(false);
      setDisplayB(false);
      setDisplayC(true);
    };

    return (
      <>
        <br />
  
        <button onClick={showA}>A</button>
        <button onClick={showB}>B</button>
        <button onClick={showC}>C</button>
  
        <div className="App">
          {displayA && <div>A</div>}
          {displayB && <div>B</div>}
          {displayC && <div>C</div>}
        </div>
      </>
    );
  }

And you can even put other things in your state, like JSX elements:

  function App() {
    const [elementToDisplay, setElementToDisplay] = useState("");

    const showA = () => {
      setElementToDisplay(<div>A</div>)
    }
    const showB = () => {
      setElementToDisplay(<div>B</div>)
    }
    const showC = () => {
      setElementToDisplay(<div>C</div>)
    }

    return (
      <>
        <br />
  
        <button onClick={showA}>A</button>
        <button onClick={showB}>B</button>
        <button onClick={showC}>C</button>
  
        <div className="App">
          {elementToDisplay}
        </div>
      </>
    );
  }

Hao Wu · Accepted Answer · 2021-02-24 01:19:11Z

1

You can save a state for the current button, and then show the different button conditionally using object lookup:

Check https://codesandbox.io/s/kind-haslett-b0fv0

function App() {
  const [currentButton, setCurrentButton] = useState('A');

  return (
    <>
      <br />

      <button onClick={() => setCurrentButton('A')}>A</button>
      <button onClick={() => setCurrentButton('B')}>B</button>
      <button onClick={() => setCurrentButton('C')}>C</button>

      <div className="App">
        {
          ({
            A: <div>A</div>,
            B: <div>B</div>,
            C: <div>C</div>
          })[currentButton]
        }
      </div>
    </>
  );
}

answered Feb 24, 2021 at 1:19

Hao Wu

21.6k7 gold badges37 silver badges79 bronze badges

Collectives™ on Stack Overflow

How can I toggle between 3 components in ReactJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related