React: Extract Repeated UI into a Component

There’s a repeated UI notice block. Extract it into a reusable MessageCard component and use it in App instead of duplicating markup.

Clean code means fewer duplicates. Encapsulating repeating UI in a component makes changes and testing easier.

What To Do

Create MessageCard with title and text props.
Move the repeated markup into MessageCard.
In App, replace the three blocks with three MessageCard instances.
Add data-testid="message-card" to the root element.

💡 Hint

Component:

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>
  );
}

In App:

<MessageCard title="Success" text="Operation completed" />

👀 Solution

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="Success" text="Operation completed" />
        <div style={{ marginTop: 16 }}>
          <MessageCard title="Warning" text="Please check input" />
        </div>
        <div style={{ marginTop: 16 }}>
          <MessageCard title="Error" text="Something went wrong" />
        </div>
      </section>
    </main>
  );
}

Why this works: The repeating UI is encapsulated; duplication is gone, readability improves, and changes are centralized.

What To Do

React: Extract Repeated UI into a Component

What To Do

🧑‍💻 It's not a bug! It's a feature!