Passing props to components in React - Mini Project: Build & Apply

Passing props to components

📖 Scenario: You are building a simple React app that shows a greeting message for a user. The greeting text should come from a parent component and be passed down to a child component.

🎯 Goal: Build two React functional components: App and Greeting. Pass a message prop from App to Greeting and display it inside Greeting.

📋 What You'll Learn

Create a functional component called App.

Inside App, create a variable greetingMessage with the exact string 'Hello, welcome to React!'.

Create a functional component called Greeting that accepts a message prop.

Render the Greeting component inside App and pass greetingMessage as the message prop.

Inside Greeting, display the message prop inside a <h1> element.

💡 Why This Matters

🌍 Real World

Passing props is how React components share data, like sending user info or settings from a main app to smaller parts of the UI.

💼 Career

Understanding props is essential for React developers to build reusable and interactive components that work together.

1

Create the App component with a greeting message

Create a React functional component called App. Inside it, create a variable called greetingMessage and set it to the string 'Hello, welcome to React!'.

React

function App() {
  // Your code here
}

Need a hint?

Remember to use const to create the greetingMessage variable inside the App function.

2

Create the Greeting component that accepts a message prop

Create a React functional component called Greeting that accepts a single prop named message. The component should return a <div> element for now.

React

function App() {
  const greetingMessage = 'Hello, welcome to React!';
}

// Your code here to create Greeting component

Need a hint?

Use destructuring in the function parameter to get the message prop.

3

Pass the greetingMessage prop from App to Greeting

Inside the App component, return the Greeting component and pass the variable greetingMessage as the message prop.

React

function App() {
  const greetingMessage = 'Hello, welcome to React!';
  // Your code here to return Greeting with message prop
}

function Greeting({ message }) {
  return ;
}

Need a hint?

Use JSX syntax to render <Greeting message={greetingMessage} /> inside App.

4

Display the message prop inside Greeting

Inside the Greeting component, replace the <div> content with an <h1> element that displays the message prop.

React

function App() {
  const greetingMessage = 'Hello, welcome to React!';
  return ;
}

function Greeting({ message }) {
  // Your code here to display message inside 
}

Need a hint?

Use curly braces {} inside JSX to insert the message prop value.