Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

React Components

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Destructuring Props

3:30 with Guil Hernandez

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.

Resources

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    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

      You need to sign up for Treehouse in order to set up Workspace

      Sign up