What are props?

Learn that props pass data into a component from outside.

What are props?

Props are how you pass data into a component from outside. They look like HTML attributes: writing <Avatar name="Ayşe" /> sends the name prop to the Avatar component.

The component receives props as an object: function Avatar(props) { return <p>{props.name}</p>; }. This object is read but never modified.

Props flow one way only: from parent to child. The child cannot change a prop; this rule keeps React predictable.

Reading props

A component takes props as a parameter: function Avatar(props) { ... }. You reach values inside with a dot: props.name, props.role.

For cleaner code you use destructuring: function Avatar({ name, role }) { ... }. This lets you write name directly instead of props.name.

Destructuring makes reading props short and clear. That's why it's common in React code.

Exercise Avatar with props

Complete the skeleton. Write a component called Avatar that takes ({ '{ name }' }) as parameter and returns <p>{name}</p>. Don't forget to export.

Show example solution

function Avatar({ name }) {
  return <p>{name}</p>;
}

export default Avatar;

Test yourself

Which way do props flow?
- Parent to child
- Child to parent
- Both ways
- Randomly
Show answer

Parent to child — Props flow from parent to child.

Props syntax

The ____ prop is sent to Avatar.

Show answer

The name prop is sent to Avatar.

Match the props usage

name="Ayşe"

Send prop
props.name

Object access
{ name }

Destructuring
props

Parameter

Next lesson: Reading props

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies