Show one div hide another onclick in ReactJS

Question

Quite new to ReactJS and using it for web development. How do I show one div but hide all others onclick, all divs are hidden on purpose (popup divs from onclick on sidebar menu).

I have two buttons on a side panel and two divs that are hidden on page load. Currently I have each of them hiding/showing onclick but the problem is if one is opened when the other is opened then they both appear which is not what I want (as they cover each other)

Current code:


export default function LoginBox() { 
  const [show, setShow] =  useState(false);
  const [showControls, setShowControls] =  useState(false);

  return (
    <>

<div id="sidebarLeft" className="hideBar">
        <div className="leftBarDetails">
          
          <div className="home topButton">
            <div className="sideButtonIcon" 
            
            onClick={()=>{setShow(!show)}}
            
            >
              <i className="fa-solid fa-user"></i>
            </div>
          </div>
          <div className="home topButton">
            <div className="sideButtonIcon" onClick={()=>{setShowControls(!showControls)}}>
              <i className="fa-solid fa-gamepad"></i>
            </div>
          </div>
    
        </div>
      </div>
     {show && <div className="logincontainer hidden">
            <label className="close-btn fas fa-times" onClick={()=>{setShow(!show)}}></label>
            <div className="text">Login Form</div>
            <form action="#">
              <div className="data">
                <label>Email</label>
                <input type="text" required />
              </div>
              <div className="data">
                <label>Password</label>
                <input type="password" required />
              </div>
              <div className="forgot-pass">
                <a href="#">Forgot Password?</a>
              </div>
              <div className="btn">
                <div className="inner"></div>
                <button type="submit">login</button>
              </div>
              <div className="signup-link">
                Need an account?
                <a href="#"> Signup now</a>
              </div>
            </form>
          </div>}
     {showControls && <div className="logincontainer hidden">
            <label className="close-btn fas fa-times" 
            onClick={()=>{setShowControls(!showControls)}}>

            </label>
            <div className="text"> <p>
              <b>CONTROLS</b>
              :<br />
              <b>WASD || ARROW KEYS</b>
              - Move<br />
              <b>R|F || SPACEBAR | SHIFT</b>
              - Up | Down<br />
            </p></div>
            
          </div>}

After some research and assistance from chatgpt I solved my issue with the following code:


import { useState } from "react";

export default function LoginBox() {
  const [show, setShow] = useState('');
  const [sidebarActive, setSidebarActive] = useState(false);

  const handleClick = (id) => {
    if (show === id) {
      setShow('');
      setSidebarActive(false);
    } else {
      setShow(id);
      setSidebarActive(true);
    }
  };

  const handleParentClick = () => {
    if (sidebarActive) {
      setShow('');
      setSidebarActive(false);
    }
  };

  return (
    <>
      <div id="sidebarLeft" className={`hideBar ${sidebarActive ? 'active' : ''}`}>
        <div className="leftBarDetails">
        
          <div className="home topButton" onClick={() => handleClick('login')}>
            <div className="sideButtonIcon">
              <i className="fa-solid fa-user"></i>
            </div>
          </div>
          <div className="home topButton" onClick={() => handleClick('controls')}>
            <div className="sideButtonIcon">
              <i className="fa-solid fa-gamepad"></i>
            </div>
          </div>
        </div>
      </div>

      {show === 'login' && (
        <div className="logincontainer hidden" onClick={handleParentClick}>
          <label className="close-btn fas fa-times" onClick={() => setShow('')}></label>
          <div className="text">Login Form</div>
          <form action="#">
            <div className="data">
              <label>Email</label>
              <input type="text" required />
            </div>
            <div className="data">
              <label>Password</label>
              <input type="password" required />
            </div>
            <div className="forgot-pass">
              <a href="#">Forgot Password?</a>
            </div>
            <div className="btn">
              <div className="inner"></div>
              <button type="submit">login</button>
            </div>
            <div className="signup-link">
              Need an account? <a href="#"> Signup now</a>
            </div>
          </form>
        </div>
      )}

      {show === 'controls' && (
        <div className="logincontainer hidden" onClick={handleParentClick}>
          <label className="close-btn fas fa-times" onClick={() => setShow('')}></label>
          <div className="text">
            <p>
              <b>CONTROLS</b>:<br />
              <b>WASD || ARROW KEYS</b> - Move<br />
              <b>R|F || SPACEBAR | SHIFT</b> - Up | Down<br />
              <b>LEFT CLICK AND MOUSE</b> - Camera Movement<br />
              <b>ESC</b> - Exit Camera Movement<br />
            </p>
          </div>
        </div>
      )}  
    </>
  );
}

Thanks everyone for the help anyway and I hope it helps someone else

you will need some logic to close the divs you do not want to see — bwright, Jul 03 '23 at 08:00
You need to create a Minimal, Reproducible Example, otherwise, other people cannot help you easily, you may refer to the page for detail. https://stackoverflow.com/help/minimal-reproducible-example — The KNVB, Jul 03 '23 at 08:30
https://meta.stackoverflow.com/questions/307553/is-it-better-to-answer-or-edit-your-question-to-post-solution — André, Jul 03 '23 at 09:02

André · Accepted Answer · 2023-07-03T08:47:44.420

There are several ways to solve this, for example you can add two useEffect hooks that will check whether the other divs are shown and hide them accordingly:

useEffect(() => {
  if (show) {
    setShowControls(false);
  }
}, [show]);

useEffect(() => {
  if (showControls) {
    setShow(false);
  }
}, [showControls]);

And don't forget to add the import:

import { useEffect } from 'react';

Another option is to add this logic in the onClick functions directly:

<div className="home topButton">
  <div
    className="sideButtonIcon"
    onClick={() => { 
    // This check ensures the other div will hide if previously shown
      if (showControls) {
        setShowControls(false);
      }
      setShow(!show);
    }}
  >
    <i className="fa-solid fa-user"></i>
  </div>
</div>

And:

<div className="home topButton">
  <div
    className="sideButtonIcon"
    onClick={() => {
    // This check ensures the other div will hide if previously shown
      if (show) {
        setShow(false);
      }
      setShowControls(!showControls);
    }}
  >
    <i className="fa-solid fa-gamepad"></i>
  </div>
</div>

Thank you for this, great explanation. I came to an alternative but this is useful for future understanding. — SecretFerret, Jul 03 '23 at 08:46

score 0 · Answer 2 · answered Jul 03 '23 at 08:42

I have managed to solve the issue myself, I have update my question with the solution I came to.

I we introduced a handleClick function that takes an id parameter representing the id of the div to be shown. When a button (div inside sidebar of divs) is clicked, this function is called with the corresponding id, and it updates the show state to that id.

The appropriate div based on the show state will be shown if its id matches the show state value. When the close button is clicked, we set the show state back to an empty string ('') to hide all divs.

As an additional functionality another useState hook was used to show and hide the box when the button (div inside the sidebar corresponding to a certain box to show/hide) is toggled.

Show one div hide another onclick in ReactJS

2 Answers2