Default props in React - Mini Project: Build & Apply

Using Default Props in React Functional Components

📖 Scenario: You are building a simple React app that shows a greeting message. Sometimes the user name is not provided, so you want to show a default name instead.

🎯 Goal: Create a React functional component called Greeting that shows a message with a name prop. Use default props to show Guest if no name is given.

📋 What You'll Learn

Create a functional component named Greeting that accepts a name prop

Set default props so that name is Guest if not provided

Render a <div> with the text Hello, {name}!

Use the component twice: once with a name prop and once without

💡 Why This Matters

🌍 Real World

Default props help keep React components flexible and user-friendly by providing fallback values when some data is missing.

💼 Career

Knowing how to use default props is essential for building robust React components that handle missing or optional data gracefully.

1

Create the Greeting component with a name prop

Create a React functional component called Greeting that accepts a name prop and returns a <div> with the text Hello, {name}!.

React

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

Need a hint?

Use a function that takes { name } as parameter and returns JSX with Hello, {name}!.

2

Add default props for the name

Add default props to the Greeting component so that name is Guest if no prop is passed.

React

function Greeting({ name }) {
  return Hello, {name}!;
}

// Your code here to add default props

Need a hint?

Use Greeting.defaultProps = { name: 'Guest' } after the function.

3

Use the Greeting component with and without the name prop

Render the Greeting component twice inside a parent App component: once with name="Alice" and once without any name prop.

React

function Greeting({ name }) {
  return Hello, {name}!;
}

Greeting.defaultProps = {
  name: 'Guest'
};

function App() {
  // Your code here
}

Need a hint?

Use a fragment <></> to wrap two Greeting components inside App.

4

Export the App component as default

Add a default export for the App component at the end of the file.

React

function Greeting({ name }) {
  return Hello, {name}!;
}

Greeting.defaultProps = {
  name: 'Guest'
};

function App() {
  return (
    
      
      
    
  );
}

// Your code here to export App

Need a hint?

Use export default App; at the end of the file.