Логические значения в состоянии

Состояние со значением true или false отлично подходит для всего, что бывает включено или выключено: подробности показаны или скрыты, группа в избранном или нет, меню открыто или закрыто.

const [showDetails, setShowDetails] = useState(false);

function handleToggle() {
    setShowDetails(!showDetails);
}

return (
    <article className="card">
        <h2>Жестяные роботы</h2>
        <button onClick={handleToggle}>
            {showDetails ? "Скрыть подробности" : "Показать подробности"}
        </button>
        {showDetails && <p>Шатёр, суббота 21:00</p>}
    </article>
);

!showDetails — это противоположность текущему значению: false становится true, а true становится false. Поэтому одна кнопка открывает подробности, а она же их закрывает.

Что показывает страница, решают условия из урока «Списки и условия»: ? : выбирает текст кнопки, а && показывает абзац, только пока showDetails равно true. Когда оно равно false, абзац не спрятан: его на странице просто нет.

Так обычно и работают приложения на React. Состояние говорит, как обстоят дела, а JSX описывает, как выглядит страница в каждом случае. Вы не добавляете и не убираете элементы сами. Вы меняете состояние, а остальное делает React.

Логическое значение может выбирать и класс, чтобы CSS оформлял элемент по-разному:

<article className={favorite ? "card favorite" : "card"}>

Давайте логическим значениям имена, которые отвечают на вопрос «да или нет»: showDetails, favorite, isOpen. Тогда showDetails && … читается почти как предложение.