Set CSS display: none conditionally in React

Set CSS display: none conditionally in React #

To set the CSS display property to none conditionally in React:

Store a boolean in the state that indicates if the element should be shown.
Conditionally set the display property in the element's style prop.
For example, style={{display: isShown ? 'block' : 'none'}}.

App.js

Copied!
import {useState} from 'react';

export default function App() {
  const [isShown, setIsShown] = useState(true);

  const handleClick = event => {
    // 👇️ toggle visibility
    setIsShown(current => !current);
  };

  return (
    <div>
      <button onClick={handleClick}>Toggle visibility</button>

      <div style={{display: isShown ? 'block' : 'none'}}>
        <h2>Some content here</h2>
      </div>
    </div>
  );
}

conditional display none

We used the useState hook to store a boolean that indicates if an element should be shown or not.

Every time the button element is clicked, the isShown boolean is toggled, but this could be triggered in any other way.

Note that we passed a function to setIsShown. This is important, because the function we passed to setIsShown is guaranteed to be invoked with the current (most up to date) value of the isShown boolean.

If the new state is computed using the previous state, you can pass a function to setState().

The display property of the style prop of the div element is conditionally set using a ternary operator.

The ternary operator is very similar to an if/else statement.

If the value to the left of the question mark is truthy, the operator returns the value to the left of the colon, otherwise the value to the right of the colon is returned.

App.js

Copied!
const result1 = 5 === 5 ? 'yes' : 'no';
console.log(result1); // 👉️ "yes"

const result2 = 5 === 10 ? 'yes' : 'no';
console.log(result2); // 👉️ "no"

If the isShown state variable stores a truthy value, we set the display property to block. Otherwise, it's set to none.

The same approach can also be used if you rely on setting class names for your styling.

App.js

Copied!
import {useState} from 'react';

// 👇️ import css file
import './App.css';

export default function App() {
  const [isShown, setIsShown] = useState(true);

  const handleClick = event => {
    setIsShown(current => !current);
  };

  // 👇️ using classes
  return (
    <div>
      <button onClick={handleClick}>Toggle visibility</button>

      <div className={isShown ? 'display-block' : 'display-none'}>
        <h2>Some content here</h2>
      </div>
    </div>
  );
}

And here is the css that defines the display-block and display-none classes.

App.css

Copied!
.display-block {
  display: block;
}

.display-none {
  display: none;
}

The code snippet above achieves the same result using classes instead of the style prop.

If the element you are setting the class on has different classes as well, use a template string.

App.js

Copied!
import {useState} from 'react';
import './App.css';

export default function App() {
  const [isShown, setIsShown] = useState(true);

  const handleClick = event => {
    // 👇️ toggle visibility
    setIsShown(current => !current);
  };

  return (
    <div>
      <button onClick={handleClick}>Toggle visibility</button>

      <div className={`my-class ${isShown ? 'display-block' : 'display-none'}`}>
        <h2>Some content here</h2>
      </div>
    </div>
  );
}

The dollar sign curly braces syntax enables us to evaluate an expression directly in the template string.

Set CSS display: none conditionally in React

Set CSS display: none conditionally in React #

Borislav Hadzhiev