In this video, I'll go over a pattern you'll see

used frequently in React components that accept props.

ES 2015 introduced a feature called 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 use destructuring in React to make their components cleaner and

easier to understand.

It provides a more concise way to write your props.

For example, wherever we're using props we need to repeat props.propname or

this.props.propname over and over again.

Since props is an object, we can destructure a component's props into

individual variables which will help prevent us from having to repeat props or

this.props everywhere we use props.

There are two ways you can destructure props in a stateless functional component,

with a variable assignment or in the functions parameters.

In the header function, for example, you declare a variable assignment

with const followed by curly braces equals props.

In the curly braces we define what values to extract from the props object.

Header current accepts two props so I'll write players and title.

Now I can replace props.players and

props.title with the players and title variables only.

Or better yet we can specify the properties we want to pull out of

the props object in the function's parameters.

Pass the function and object.

Inside the object, list the property names players, and title.

I prefer this approach because I like how each prop is clearly listed up top,

providing a convenient way to see all of the props the component is receiving at

a quick glance.

Now let's go into the counter component and do the same.

Replace the props parameter with curly braces to pass in an object.

Counter receives the props index, score, and changeScore.

And the JSX we'll simply reference the variable names only,

changeScore, score and changeScore.

And above the return we can remove the index variable because the assignment

to props.index is now being handled with destructuring assignment.

I'll do one more, then let you do the rest.

The Player component is a class, you know that in classes props are not accessed

through a props parameter, like they are in functions.

To destructure from this.props, you use a variable assignment.

In the render method,

I'll add const followed by curly braces equals this.props.

Then list the props we wanted destructure,

we'll add name, id, score, index,

removePlayer and changeScore.

Then I'll replace this.props with just the variable name.

So as you can see, using destructuring to do away with referencing props or

this.props in multiple places, can make your components look cleaner and

improve code readability.

I'm going to stop right here, but you don't have to.

If you'd like, you can destructure the props passed to the stats,

and add player form components too.