Destructuring 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