Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Phase 5 · 2 / 9Props
Phase 5React
9 topics · 5–6 wks
  1. 1Components and JSX
  2. 2Props
  3. 3State with useState
  4. 4Events in React
  5. 5Showing things conditionally
  6. 6Lists and keys
  7. 7Forms and inputs
  8. 8useEffect
  9. 9Fetching data in React
JourneyPhase 5Props
01 / 10Overview

Props

You'll learn to pass values into a component with props, so one component can show different data.

Why it mattersProps are how every React screen sends data from a parent component down to the pieces inside it.
about 75 min·needs: Components and JSX, Objects, Destructuring and spread
02 / 10

Watch & read

Start with the required ones. The others are there when you need them.

Docs
Passing props to a componentreact.dev · official docs · 20 min · English
MMamun's noteRead up to and including "Specifying a default value for a prop", then "How props change over time". You can skip the spread and children parts for now.
Video
Full React tutorial #11: propsYouTube · Net Ninja · 9 min · English
MMamun's noteWatch all nine minutes. He moves a list into its own component and passes the data in as a prop. Ignore the earlier setup from his series.
VideoOptional
Full React tutorial #12: reusing componentsYouTube · Net Ninja · 5 min · English
MMamun's noteA short follow-up. The same component is used twice with different props, which is the whole point of props.
03 / 10

See it step by step

Watch props flow from the parent into each child.

ClassList"rendering"
ClassList.jsx
1function Student({ name, year }) {
2 return <li>{name}, year {year}</li>;
3}
4
5function ClassList() {
6 return (
7 <ul>
8 <Student name="Rafi" year={2} />
9 <Student name="Nusrat" year={3} />
10 </ul>
11 );
12}
React renders ClassList, the parent. It has no props of its own.
Step 1 / 7
04 / 10

Explanation

You made a ScoreCard component, but it always shows Bangladesh and 245. You want the same card for every team, with different values. A function solves this with parameters. A component solves it with props (short for properties).

You pass props like HTML attributes, and the component receives them as one object:

<Student name="Rafi" year={2} />
 
function Student({ name, year }) {
  return <li>{name}, year {year}</li>;
}

React calls Student with { name: "Rafi", year: 2 }. The { name, year } in the brackets is destructuring: it takes those two values out of the object. The component that writes <Student ... /> is the parent. Student is the child. Data flows one way, from parent to child.

Text goes in quotes: name="Rafi". Anything else goes in { }: numbers, true, arrays, objects, functions. year="2" is the string "2", not the number 2. People often write numbers in quotes and then get "200" + 60 = "20060".

A child must not change its props. They belong to the parent. If a value has to change, that is state, the next topic.

People also forget the { } in function Student({ name }). Without them, name is the whole props object, and React shows an error about an object.

When you read a component, look at its brackets first: they list every value it expects from its parent.

Words to recognise
propsparent componentchild componentdestructuring
05 / 10

Code tour

Click a line number with a ring to read the note for that line.

App.jsx5 notes
function MatchScore({ team, runs, wickets }) {
Mentor note · line 1
The brackets list the props this component expects. React passes one object, and { team, runs, wickets } takes the three values out of it.
2 return (
3 <p>
{team}: {runs}/{wickets}
5 </p>
6 );
7}
8
export default function App() {
10 return (
11 <div>
<MatchScore team="Bangladesh" runs={245} wickets={6} />
<MatchScore team="India" runs={198} wickets={10} />
14 </div>
15 );
16}
06 / 10

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 1
1function Total({ price, delivery }) {
2  return <p>Total: {price + delivery}</p>;
3}
4 
5export default function App() {
6  return <Total price="200" delivery={60} />;
7}
What appears on screen?
07 / 10

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3What does Student receive from <Student name="Rafi" year={2} />?
  2. 2 / 3Can a child component change a prop it received?
  3. 3 / 3What is the type of year in <Student year="2" />?
08 / 10

Explain it back

Only you can see this. Log in to keep it.0 words
09 / 10

How confident are you with Props?

10 / 10

Done

You can now
Read <Student name="Rafi" year={2} /> and say what the child component receives and shows.
Next: State with useState Back to Phase 5
On this page
  1. 01Props
  2. 02Watch & read
  3. 03See it step by step
  4. 04Explanation
  5. 05Code tour
  6. 06Practice
  7. 07Quick check
  8. 08Explain it back
  9. 09Confidence
  10. 10Done
Up next · 02 / 10Watch & read
Mamun Labs LearnFound a mistake on this page? Tell Mamun.
Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Log in to save your progress. Everything here works without an account.Log in to save progressLog in
Phase 5React
9 topics · 5–6 wks
  1. 1Components and JSX
  2. 2Props
  3. 3State with useState
  4. 4Events in React
  5. 5Showing things conditionally
  6. 6Lists and keys
  7. 7Forms and inputs
  8. 8useEffect
  9. 9Fetching data in React
JourneyPhase 5Props
01 / 10Overview

Props

You'll learn to pass values into a component with props, so one component can show different data.

Why it mattersProps are how every React screen sends data from a parent component down to the pieces inside it.
about 75 min·needs: Components and JSX, Objects, Destructuring and spread
02 / 10

Watch & read

Start with the required ones. The others are there when you need them.

Docs
Passing props to a componentreact.dev · official docs · 20 min · English
MMamun's noteRead up to and including "Specifying a default value for a prop", then "How props change over time". You can skip the spread and children parts for now.
Video
Full React tutorial #11: propsYouTube · Net Ninja · 9 min · English
MMamun's noteWatch all nine minutes. He moves a list into its own component and passes the data in as a prop. Ignore the earlier setup from his series.
VideoOptional
Full React tutorial #12: reusing componentsYouTube · Net Ninja · 5 min · English
MMamun's noteA short follow-up. The same component is used twice with different props, which is the whole point of props.
03 / 10

See it step by step

Watch props flow from the parent into each child.

ClassList"rendering"
ClassList.jsx
1function Student({ name, year }) {
2 return <li>{name}, year {year}</li>;
3}
4
5function ClassList() {
6 return (
7 <ul>
8 <Student name="Rafi" year={2} />
9 <Student name="Nusrat" year={3} />
10 </ul>
11 );
12}
React renders ClassList, the parent. It has no props of its own.
Step 1 / 7
04 / 10

Explanation

You made a ScoreCard component, but it always shows Bangladesh and 245. You want the same card for every team, with different values. A function solves this with parameters. A component solves it with props (short for properties).

You pass props like HTML attributes, and the component receives them as one object:

<Student name="Rafi" year={2} />
 
function Student({ name, year }) {
  return <li>{name}, year {year}</li>;
}

React calls Student with { name: "Rafi", year: 2 }. The { name, year } in the brackets is destructuring: it takes those two values out of the object. The component that writes <Student ... /> is the parent. Student is the child. Data flows one way, from parent to child.

Text goes in quotes: name="Rafi". Anything else goes in { }: numbers, true, arrays, objects, functions. year="2" is the string "2", not the number 2. People often write numbers in quotes and then get "200" + 60 = "20060".

A child must not change its props. They belong to the parent. If a value has to change, that is state, the next topic.

People also forget the { } in function Student({ name }). Without them, name is the whole props object, and React shows an error about an object.

When you read a component, look at its brackets first: they list every value it expects from its parent.

Words to recognise
propsparent componentchild componentdestructuring
05 / 10

Code tour

Click a line number with a ring to read the note for that line.

App.jsx5 notes
function MatchScore({ team, runs, wickets }) {
Mentor note · line 1
The brackets list the props this component expects. React passes one object, and { team, runs, wickets } takes the three values out of it.
2 return (
3 <p>
{team}: {runs}/{wickets}
5 </p>
6 );
7}
8
export default function App() {
10 return (
11 <div>
<MatchScore team="Bangladesh" runs={245} wickets={6} />
<MatchScore team="India" runs={198} wickets={10} />
14 </div>
15 );
16}
06 / 10

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 1
1function Total({ price, delivery }) {
2  return <p>Total: {price + delivery}</p>;
3}
4 
5export default function App() {
6  return <Total price="200" delivery={60} />;
7}
What appears on screen?
07 / 10

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3What does Student receive from <Student name="Rafi" year={2} />?
  2. 2 / 3Can a child component change a prop it received?
  3. 3 / 3What is the type of year in <Student year="2" />?
08 / 10

Explain it back

Only you can see this. Log in to keep it.0 words
09 / 10

How confident are you with Props?

10 / 10

Done

You can now
Read <Student name="Rafi" year={2} /> and say what the child component receives and shows.
Next: State with useState Back to Phase 5
On this page
  1. 01Props
  2. 02Watch & read
  3. 03See it step by step
  4. 04Explanation
  5. 05Code tour
  6. 06Practice
  7. 07Quick check
  8. 08Explain it back
  9. 09Confidence
  10. 10Done
Up next · 02 / 10Watch & read

You made a ScoreCard component, but it always shows Bangladesh and 245. You want the same card for every team, with different values. A function solves this with parameters. A component solves it with props (short for properties).

You pass props like HTML attributes, and the component receives them as one object:

<Student name="Rafi" year={2} />
 
function Student({ name, year }) {
  return <li>{name}, year {year}</li>;
}

React calls Student with { name: "Rafi", year: 2 }. The { name, year } in the brackets is destructuring: it takes those two values out of the object. The component that writes <Student ... /> is the parent. Student is the child. Data flows one way, from parent to child.

Text goes in quotes: name="Rafi". Anything else goes in { }: numbers, true, arrays, objects, functions. year="2" is the string "2", not the number 2. People often write numbers in quotes and then get "200" + 60 = "20060".

A child must not change its props. They belong to the parent. If a value has to change, that is state, the next topic.

People also forget the { } in function Student({ name }). Without them, name is the whole props object, and React shows an error about an object.

When you read a component, look at its brackets first: they list every value it expects from its parent.

Words to recognise
propsparent componentchild componentdestructuring

You made a ScoreCard component, but it always shows Bangladesh and 245. You want the same card for every team, with different values. A function solves this with parameters. A component solves it with props (short for properties).

You pass props like HTML attributes, and the component receives them as one object:

<Student name="Rafi" year={2} />
 
function Student({ name, year }) {
  return <li>{name}, year {year}</li>;
}

React calls Student with { name: "Rafi", year: 2 }. The { name, year } in the brackets is destructuring: it takes those two values out of the object. The component that writes <Student ... /> is the parent. Student is the child. Data flows one way, from parent to child.

Text goes in quotes: name="Rafi". Anything else goes in { }: numbers, true, arrays, objects, functions. year="2" is the string "2", not the number 2. People often write numbers in quotes and then get "200" + 60 = "20060".

A child must not change its props. They belong to the parent. If a value has to change, that is state, the next topic.

People also forget the { } in function Student({ name }). Without them, name is the whole props object, and React shows an error about an object.

When you read a component, look at its brackets first: they list every value it expects from its parent.

Words to recognise
propsparent componentchild componentdestructuring