Reactbeginner7 min read

Props

Learn how to use props (properties) to pass data from parent components down to their child components.

Learning Goals

Pass data from parent components to child components using props.

Access prop values inside functional components cleanly.

Provide default fallback values for optional props.

Render list items dynamically by mapping arrays to component props.

The Core Concept

Components are great, but they are static if they always display the exact same text. Props (short for 'properties') solve this. Props let you pass data down from a parent component to a child component, making components dynamic and reusable.

Think of props like HTML attributes (like src or href), or like function arguments. When a parent renders a child, it passes props as key-value attributes. The child component receives these props as a single JavaScript object parameter, which can be destructured to access individual values directly.

Visual guide

React concept flow

A simple original diagram to connect the lesson idea with real project flow.

1Concept

2Example

3Output

4Mistakes

5Practice

Code & Implementation

react

// 1. Child component that receives props
// We destructure name and role directly in the parameter list
function UserCard({ name, role }) {
  return (
    <div style={{ border: '1px solid #ddd', padding: '16px', margin: '8px 0' }}>
      <h3>{name}</h3>
      <p>Role: {role}</p>
    </div>
  );
}

// 2. Parent component passing different data to the children
export default function TeamPage() {
  return (
    <div>
      <h2>Meet the Team</h2>
      <UserCard name="Alice" role="Lead Designer" />
      <UserCard name="Marcus" role="Senior Engineer" />
    </div>
  );
}

Expected Output

UI preview:
- Heading 'Meet the Team'
- Card 1: Alice, Role: Lead Designer
- Card 2: Marcus, Role: Senior Engineer

Dynamic Product List

Hands-on practice task

Required for Mastery

The Challenge

Build a Product component that takes title and price as props. Render it inside a Shop component three times, passing different details and prices.

Helpful Hints

•Define function Product({ title, price }) returning a styled div.
•In Shop component, pass title and price props to each Product instance.

Quick Knowledge Check

Why can't I edit a prop inside the child component?

React follows a strict 'one-way data flow' design. Props represent configuration data passed from above. If a child needs to modify data, it should use state instead.

What is props.children?

props.children is a special built-in prop that references any content wrapped inside the opening and closing tags of your custom component (e.g. <Card>This is children</Card>).

Continue Learning

Next steps after this lesson

Previous lessonComponents Next lessonState Dynamic Product ListBuild a Product component that takes title and price as props. Render it inside a Shop component three times, passing different details and prices.Slug GeneratorUse this free tool while practicing the lesson.Free Developer Learning HubExplore coding tutorials, tools, projects, automation guides, and resume resources.

Practice task

Build a Product component that takes title and price as props. Render it inside a Shop component three times, passing different details and prices.

Ready to take action?

Supercharge your career workflows!

Discover free online utilities to format data, build job applications, and automate your productivity routine with TechIdea.

Browse 80+ Free Tools Build Professional Resume