What Are Props in React: Simple Explanation and Example

Props in React are inputs to components that allow you to pass data from a parent component to a child component. They work like function arguments and help components display dynamic content or behave differently based on the data they receive.

How It Works

Think of props as the way you give instructions or information to a friend before they do a task. In React, a parent component sends props to a child component, telling it what to show or how to behave. This is similar to giving a recipe to a cook so they know what to prepare.

When a component receives props, it can use them inside its code to display text, images, or even decide what to do next. The child component cannot change these props — they are read-only, like a letter you receive that you can read but not rewrite.

Example

This example shows a parent component passing a name prop to a child component, which then displays a greeting message using that prop.

jsx

import React from 'react';

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

export default function App() {
  return <Greeting name="Alice" />;
}

Output

Hello, Alice!

When to Use

Use props whenever you want to make a component reusable with different data. For example, if you have a button component, you can pass the button text and click behavior as props so the same button component can be used in many places with different labels and actions.

Props are also useful for passing user input, configuration settings, or any information from a parent to a child component to keep your app organized and flexible.

Key Points

• Props are read-only inputs to components.
• They allow data to flow from parent to child components.
• Props make components reusable and dynamic.
• Child components cannot modify props directly.
• Use props to customize component behavior and display.

Key Takeaways

Props let you pass data from parent to child components in React.

Props are read-only and help components show dynamic content.

Use props to make components reusable with different inputs.

Child components receive props like function arguments.

Props keep your React app organized and flexible.