Исчезающая кнопка

Цель: создать компонент с кнопкой, которая исчезает при клике пользователя.

💡 Подсказка к решению

Для создания исчезающей кнопки вам понадобится:

Состояние: Используйте хук useState для отслеживания видимости кнопки.
Обработчик событий: Создайте функцию, которая изменяет состояние при клике.
Условный рендеринг: Отобразите кнопку или сообщение в зависимости от состояния.
Стилизация: Добавьте стили для улучшения внешнего вида (по желанию).

// Пример использования useState
const [isVisible, setIsVisible] = useState(true);
 
// Пример обработчика события
const handleClick = () => {
  setIsVisible(false);
};

👀 Решение

import React, { useState } from 'react';
 
export default function DisappearingButton() {
  // Состояние для отслеживания видимости кнопки
  const [isVisible, setIsVisible] = useState(true);
 
  // Обработчик клика, который скрывает кнопку
  const handleClick = () => {
    setIsVisible(false);
  };
 
  return (
    <div style={{ textAlign: 'center', margin: '20px' }}>
      {isVisible ? (
        <button 
          onClick={handleClick}
          style={{
            padding: '10px 20px',
            backgroundColor: '#4CAF50',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer',
            fontSize: '16px'
          }}
        >
          Нажми меня!
        </button>
      ) : (
        <p style={{ fontSize: '18px', color: '#f44336' }}>
          Кнопка исчезла! ✨
        </p>
      )}
    </div>
  );
}

Анализ решения:

Состояние: Используем хук useState для создания состояния isVisible с начальным значением true.
Обработчик событий: Функция handleClick изменяет состояние на false при клике.
Условный рендеринг: Используем тернарный оператор для отображения кнопки или сообщения в зависимости от состояния.
Стилизация: Добавлены базовые стили для улучшения внешнего вида компонента.
UX: После исчезновения кнопки отображается сообщение, информирующее пользователя об этом.

Описание задачи

Вам нужно создать компонент с кнопкой, которая исчезает при клике пользователя.

Ключевые требования:

При начальном рендере должна отображаться кнопка
При клике на кнопку она должна исчезать
После исчезновения кнопки можно отобразить сообщение (по желанию)
Использовать хук useState для управления состоянием видимости

Примеры

// При начальном рендере
<DisappearingButton /> // Отображает кнопку "Нажми меня!"
 
// После клика на кнопку
// Отображает сообщение "Кнопка исчезла! ✨"

Требования

Компонент должен называться DisappearingButton
Используйте хук useState для управления состоянием видимости
Реализуйте обработчик события клика
Примените условный рендеринг для отображения кнопки или сообщения
Стилизация компонента приветствуется, но не обязательна

Описание задачи

Примеры

Требования

Исчезающая кнопка

Описание задачи

Примеры

Требования

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