Using props in JSX in React - Mini Project: Build & Apply

Using props in JSX

📖 Scenario: You are building a simple React app that shows a greeting message for different users. Each greeting should show the user's name inside a friendly message.

🎯 Goal: Build a React functional component called Greeting that uses props to display a personalized message with the user's name.

📋 What You'll Learn

Create a functional component named Greeting that accepts props.

Use props.name inside JSX to show the user's name.

Render the Greeting component with the name "Alice".

Render the Greeting component with the name "Bob".

💡 Why This Matters

🌍 Real World

Using props in JSX is how React apps show dynamic data like user names, messages, or product info.

💼 Career

Understanding props is essential for React developers to build reusable and flexible UI components.

1

Create the Greeting component

Create a React functional component called Greeting that accepts props as a parameter.

React

function Greeting(props) {
  // Your code here
}

Need a hint?

Start by writing a function named Greeting that takes props as input.

2

Use props.name inside JSX

Inside the Greeting component, return a <div> element that contains the text Hello, followed by the value of props.name.

React

function Greeting(props) {
  // Return a div with 'Hello, ' and props.name
  // Your code here
}

Need a hint?

Use JSX syntax to embed props.name inside curly braces within the <div>.

3

Render Greeting with name 'Alice'

Render the Greeting component with the prop name set to "Alice" inside a root <div>.

React

function Greeting(props) {
  return Hello, {props.name};
}

// Render Greeting with name 'Alice'
// Your code here

Need a hint?

Use JSX to render <Greeting name="Alice" /> inside a <div>.

4

Render Greeting with name 'Bob'

Add another Greeting component inside the same root <div> with the prop name set to "Bob" below the first one.

React

function Greeting(props) {
  return Hello, {props.name};
}

const App = () => {
  return (
    
      
      {/* Add Greeting with name 'Bob' here */}
    
  );
};

Need a hint?

Render <Greeting name="Bob" /> below the first greeting inside the same <div>.