React: Вынести повторяющийся UI в компонент

Есть повторяющийся UI-блок уведомления. Вынеси его в отдельный компонент MessageCard и используй в App вместо дублирования разметки.

Чистый код — меньше дубликатов. Повторяющиеся куски UI легче поддерживать, когда они оформлены как отдельный компонент.

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

Создай MessageCard с пропсами title и text.
Перенеси повторяющуюся разметку в MessageCard.
В App замени три блока на три вызова MessageCard.
Добавь data-testid="message-card" на корневой элемент компонента.

💡 Подсказка

Компонент:

function MessageCard({ title, text }) {
  return (
    <article className="notice" data-testid="message-card">
      <h3 className="notice__title">{title}</h3>
      <p className="notice__text">{text}</p>
    </article>
  );
}

В App:

<MessageCard title="Успех" text="Операция выполнена" />

👀 Решение

import React from 'react';
import './styles.css';
 
export function MessageCard({ title, text }) {
  return (
    <article className="notice" data-testid="message-card">
      <h3 className="notice__title">{title}</h3>
      <p className="notice__text">{text}</p>
    </article>
  );
}
 
export default function App() {
  return (
    <main className="challenge-container">
      <section>
        <MessageCard title="Успех" text="Операция выполнена" />
        <div style={{ marginTop: 16 }}>
          <MessageCard title="Предупреждение" text="Проверьте введённые данные" />
        </div>
        <div style={{ marginTop: 16 }}>
          <MessageCard title="Ошибка" text="Что-то пошло не так" />
        </div>
      </section>
    </main>
  );
}

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

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

React: Вынести повторяющийся UI в компонент

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

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