React: Колбэк по клику

Передай колбэк через пропсы и вызови его при клике на кнопку. Без состояния — только пропсы и обработчик.

Практика рукоблудия! Часто нужно навешивать на кнопку действие, переданное сверху. Задача: принять колбэк и вызвать его по клику.

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

Реализуй ActionButton с пропсами:
- onClick: () => void — обработчик клика (обязателен),
- label: string — текст кнопки (по умолчанию 'Click').
Рендери <button> с заданным текстом.
По клику вызывай onClick.
Не используй useState — достаточно пропсов и обработчика.

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

В App должно быть несколько кнопок с разными действиями.

Финальный результат должен быть таким:

💡 Подсказка

Передай обработчик напрямую: <button onClick={onClick}>.
Деструктурируй пропсы с дефолтом: function ActionButton({ onClick, label = 'Click' }).
Компонент статeless — вся логика в родителе.
Документация: react.dev/learn/responding-to-events

👀 Решение

import React from 'react';
import './styles.css';
 
export function ActionButton({ onClick, label = 'Click' }) {
  return (
    <button className="action-button" onClick={onClick}>
      {label}
    </button>
  );
}
 
export default function App() {
  function handleGreet() {
    alert('Привет!');
  }
  function handleSignIn() {
    alert('Входим...');
  }
  return (
    <main className="challenge-container">
      <section>
        <div className="action-card">
          <ActionButton onClick={handleGreet} label="Поздороваться" />
        </div>
        <div className="action-card" style={{ marginTop: 16 }}>
          <ActionButton onClick={handleSignIn} label="Войти" />
        </div>
        <div className="action-card" style={{ marginTop: 16 }}>
          <ActionButton onClick={() => {}} />
        </div>
      </section>
    </main>
  );
}

Почему это работает: Обработчик клика приходит из родителя и вызывается кнопкой. Компонент остаётся простым, предсказуемым и легко тестируется.

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

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

React: Колбэк по клику

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

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

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