Показать, скрыть объект

Сначала надо создать состояние (переменную), в котором будет храниться значение, отвечающее, надо ли выводить контент. Это делается через хук useState().

import { useState } from 'react';

function App() {
  const [isVisible, setVisible] = useState(true);

  return (
    <p>Контент</p>
  );
}

На примере выше было создано состояние isVisible, и задано значение по умолчанию «true».

Также, на примере выше выводится строка «Контент». Теперь её надо выводить, если значение isVisible равно «true».

import { useState } from 'react';

function App() {
  const [isVisible, setVisible] = useState(true);

  return (
    <>
      {isVisible && (
        <p>Контент</p>
      )}
    </>
  );
}

Осталось создать кнопку, которая будет показывать и скрывать текст.

import { useState } from 'react';

function App() {
  const [isVisible, setVisible] = useState(true);

  const changeVisible = () => {
    setVisible(!isVisible);
  }

  return (
    <>
      <button onClick={changeVisible}>Переключить видимость</button>
      {isVisible && (
        <p>Контент</p>
      )}
    </>
  );
}

Пример кода на Playcode

Кастомный хук useToggle

Чтобы каждый раз не копировать поведение для скрытия объектов, можно создать хук useToggle(). Для этого надо создать файл hooks/useToggle.js и добавить следующий код:

// hooks/useToggle.js
import { useState } from "react"

export default function useToggle(defaultValue) {
  const [value, setValue] = useState(defaultValue);

  const toggleValue = () => {
    setValue(!value);
  }

  return [value, toggleValue];
}

Теперь можно скрывать и показывать контент, при этом каждый раз не создавая отдельный метод.

import useToggle from './hooks/useToggle';

export function App(props) {
  const [isVisible, toggleVisible] = useToggle(true);
  const [showContacts, toggleContactVisible] = useToggle(false);

  return (
    <>
      <button onClick={toggleVisible}>Переключить видимость</button>
      {isVisible && (
        <p>Контент</p>
      )}
      
      <button onClick={toggleContactVisible}>Показать контакты</button>
      {showContacts && (
        <p>Контакты</p>
      )}
    </>
  );
}