What are props?
- React course
- Beginner
- Lesson 17/84
- 4 min
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.
Practice 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.
Starter code
// Write the Avatar component hereSample solution
function Avatar({ name }) {
return <p>{name}</p>;
}
export default Avatar;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which way do props flow?
- Parent to child Correct answer
- Child to parent
- Both ways
- Randomly
Explanation: Props flow from parent to child.
2 Props syntax
The ____ prop is sent to Avatar.The name prop is sent to Avatar.Explanation: name is the prop sent to Avatar.
3 Match the props usage
| Term | Meaning |
|---|---|
name="Ayşe" |
Send prop |
props.name |
Object access |
{ name } |
Destructuring |
props |
Parameter |