Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
ES2015 introduced destructuring assignment, which is a special kind of syntax you can use to "unpack" (or extract) values from arrays, or properties from objects, into distinct variables. Developers often use destructuring in React to make their components cleaner and easier to understand. It provides a more concise way to write your props.
In this video,
I'll go over a pattern you'll see
0:00
used frequently in React
components that accept props.
0:02
ES 2015 introduced a feature
called destructuring assignment,
0:05
which is a special kind of
syntax you can use to unpack or
0:10
extract values from arrays, or properties
from objects into distinct variables.
0:13
Developers use destructuring in React
to make their components cleaner and
0:18
easier to understand.
0:22
It provides a more concise
way to write your props.
0:23
For example, wherever we're using props
we need to repeat props.propname or
0:26
this.props.propname over and over again.
0:32
Since props is an object, we can
destructure a component's props into
0:35
individual variables which will help
prevent us from having to repeat props or
0:39
this.props everywhere we use props.
0:44
There are two ways you can destructure
props in a stateless functional component,
0:46
with a variable assignment or
in the functions parameters.
0:50
In the header function, for example,
you declare a variable assignment
0:54
with const followed by
curly braces equals props.
0:58
In the curly braces we define what
values to extract from the props object.
1:02
Header current accepts two props so
I'll write players and title.
1:07
Now I can replace props.players and
1:13
props.title with the players and
title variables only.
1:16
Or better yet we can specify
the properties we want to pull out of
1:21
the props object in
the function's parameters.
1:25
Pass the function and object.
1:29
Inside the object, list the property
names players, and title.
1:33
I prefer this approach because I like
how each prop is clearly listed up top,
1:38
providing a convenient way to see all of
the props the component is receiving at
1:42
a quick glance.
1:46
Now let's go into the counter
component and do the same.
1:47
Replace the props parameter with
curly braces to pass in an object.
1:51
Counter receives the props index,
score, and changeScore.
1:56
And the JSX we'll simply
reference the variable names only,
2:02
changeScore, score and changeScore.
2:07
And above the return we can remove
the index variable because the assignment
2:11
to props.index is now being handled
with destructuring assignment.
2:16
I'll do one more,
then let you do the rest.
2:23
The Player component is a class, you know
that in classes props are not accessed
2:25
through a props parameter,
like they are in functions.
2:29
To destructure from this.props,
you use a variable assignment.
2:32
In the render method,
2:37
I'll add const followed by
curly braces equals this.props.
2:40
Then list the props we wanted destructure,
2:46
we'll add name, id, score, index,
2:52
removePlayer and changeScore.
2:57
Then I'll replace this.props
with just the variable name.
3:02
So as you can see, using destructuring
to do away with referencing props or
3:11
this.props in multiple places,
can make your components look cleaner and
3:15
improve code readability.
3:20
I'm going to stop right here,
but you don't have to.
3:21
If you'd like, you can destructure
the props passed to the stats,
3:24
and add player form components too.
3:28
You need to sign up for Treehouse in order to download course files.
Sign up