React: Показать/скрыть заголовок

По нажатию на кнопку можно показать или скрыть заголовок — базовая интерактивность в React.

Состояние и события. Научись управлять видимостью через state и обработчики кликов.

Что нужно сделать

Добавь состояние видимости: const [visible, setVisible] = useState(true).
Реализуй обработчик: по клику инвертируй состояние.
Обновляй текст кнопки: Скрыть когда видимо, Показать когда скрыто.

Финальный вид

Карточка с заголовком и кнопкой, которая переключает видимость. Финальный результат должен быть таким:

👀 Решение

import React, { useState } from 'react';
import './styles.css';
 
export function ToggleTitle({ initialVisible = true, title = 'Заголовок' }) {
  const [visible, setVisible] = useState(initialVisible);
  function handleToggle() {
    setVisible(v => !v);
  }
  return (
    <article className="toggle-card">
      {visible && <h3 className="toggle-title">{title}</h3>}
      <button className="action-button" onClick={handleToggle}>
        {visible ? 'Скрыть' : 'Показать'}
      </button>
    </article>
  );
}
 
export default function App() {
  return (
    <main className="challenge-container">
      <section>
        <ToggleTitle initialVisible={true} title="Заголовок раздела" />
      </section>
    </main>
  );
}

🧑‍💻 Это не баг! Это фича!

Редактор кода намеренно скрыт на мобильном.

Поверь, так лучше: я оберегаю тебя от искушения писать код в неидеальных условиях. Маленький экран и виртуальная клавиатура — не лучшие помощники для программиста.

📖 Сейчас: Изучи задачу, продумай решение. Действуй как стратег.

💻 Потом: Сядь за компьютер, открой сайт и реализуй все идеи с комфортом. Действуй как код-джедай!