React Message Display Component

Medium30m recommended

Create a React component that manages and displays messages based on user interaction. The component should demonstrate understanding of: • React state management • Conditional rendering • Event handling • Props usage

Key Requirements:

Button Element

Must have data-testid="fetch-button"

Message Display

Must have data-testid="message"

Conditional Rendering

Message should only show after button click

State Updates

Should update message on each click

Examples:

Props: getMessage={() => "Hello World!"}

Behavior: Initially shows nothing, displays "Hello World!" after clicking the button

When the button is clicked, getMessage is called and its result is displayed

Props: getMessage={() => new Date().toLocaleString()}

Behavior: Shows current timestamp when clicked

Demonstrates dynamic content updates on each click

Constraints:

• Component must use useState hook
• Must include data-testid attributes
• Initial state should be null
• Button must be clickable and trigger getMessage

Test Output

Run tests to see results...