JIYIK CN >

In React, set the CSS visibility property to hidden:

1. Stores a Boolean value in the state indicating whether the element should be visible.
2. Conditionally set the visibility property in the element's style attributes.
3. For example, style={{visibility: isVisible ? “visible”：“hidden”}}.

import {useState} from 'react';

export default function App() {
  const [isVisible, setIsVisible] = useState(true);

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

  return (
    <div>
      <div style={{visibility: isVisible ? 'visible' : 'hidden'}}>
        <h2>website: jiyik.com</h2>
      </div>

      <button onClick={handleClick}>Toggle visibility</button>
    </div>
  );
}

We use useStatethe hook to store a boolean value indicating whether the element should be visible.

Every time the button element is clicked, the isVisible boolean is toggled, but this could be triggered by any other means.

注意, we setIsVisiblepass a function to . This is important because setIsVisiblethe function we pass to is guaranteed to isVisiblebe called with the current (latest) value of the boolean.

If the new state is calculated using the previous state, a function can be passed to setState().

The visibility property of the style attribute of the div element is conditionally set using the ternary operator.

The ternary operator is if/elsevery similar to the statement.

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

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

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

If isVisiblethe state variable stores a true value, we visibilityset the property to visible . Otherwise, it is set to hidden .

The same approach can be used if we rely on setting class names for styles.

import {useState} from 'react';

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

export default function App() {
  const [isVisible, setIsVisible] = useState(true);

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

  return (
    <div>
      <div className={isVisible ? 'visible' : 'hidden'}>
        <h2>Some content here</h2>
      </div>

      <button onClick={handleClick}>Toggle visibility</button>
    </div>
  );
}

Below is the css that defines the visible and hidden classes.

.visible {
  visibility: visible;
}

.hidden {
  visibility: hidden;
}

The code snippet above achieves the same result using a class instead of the style attribute.

If the element you want to set the class on also has a different class, use template strings.

import {useState} from 'react';

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

export default function App() {
  const [isVisible, setIsVisible] = useState(true);

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

  return (
    <div>
      <div className={`my-class ${isVisible ? 'visible' : 'hidden'}`}>
        <h2>Some content here</h2>
      </div>

      <button onClick={handleClick}>Toggle visibility</button>
    </div>
  );
}

${}The syntax enables us to evaluate expressions directly in template strings.