Welcome User Component

Easy5 minutes

Create a simple welcome component that greets a user by name and allows toggling additional information.

Component Requirements

  • Create a component that displays a welcome message with the user's name
  • Add a button with id toggle-info that shows/hides additional information
  • Use the useState hook to manage the toggle state
  • The user's name should be displayed inside a heading with id greeting
  • The additional information should be in a paragraph with id info

Implementation Notes

  • Use the name prop passed to your component
  • The default state for the additional information should be hidden
  • Style the component to look welcoming and professional
  • Your component should be the default export

Example Code Structure

<div className="welcome-card">
  <h1 id="greeting">Welcome, {name}!</h1>
  <button id="toggle-info" onClick={toggleInfo}>
    {showInfo ? 'Hide Details' : 'Show Details'}
  </button>
  {showInfo && (
    <p id="info">
      We're excited to have you join us! This platform helps you learn 
      React by building real components in a hands-on environment.
    </p>
  )}
</div>
App.js
Loading...