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:08 with Laura Coronel

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 used frequently in 0:00
    React components that accept props. 0:05
    ES 2015 introduced a feature called destructuring assignment. 0:07
    Which is a special kind of syntax you can use to unpack or 0:13
    extract values from arrays or properties from objects into distinct variables. 0:18
    Developers use destructuring in React to make their components cleaner and 0:25
    easier to understand. 0:30
    It provides a more concise way to write your props. 0:33
    For example, whenever we're using props, 0:37
    we need to repeat props.prop name over and over again. 0:40
    Since props is an object, 0:46
    we can destructure a component's props into individual variables, 0:48
    which will help prevent us from having to repeat props dot everywhere we use props. 0:52
    There are two ways you can do structure props in a function component, 0:59
    with a variable assignment or in a function's parameters. 1:04
    In the Header function, for example, 1:08
    you'll declare a variable assignment with const { } = props. 1:11
    In the curly braces, we define what value to extract from the props object. 1:18
    Header currently accepts two props, so I'll write players and title. 1:24
    Now I can replace props.players and 1:30
    props.title with the players and title variable only. 1:34
    Or better yet, we can specify the properties we want to 1:40
    pull out of the props object in the functions parameter. 1:43
    Pass the function an object. 1:49
    Inside the object, list the property names, players and title. 1:51
    I prefer this approach because I like how each prop is clearly listed up top, 1:57
    providing a convenient way to see all the props a component is receiving 2:03
    at a quick glance. 2:07
    Let's go to the Counter component and do the same. 2:10
    Replace the props parameter with curly braces to pass it an object. 2:13
    Counter receives the props score, id, and changeScore. 2:18
    In the JSX, we'll simply reference the variable names only. 2:24
    So this will be changeScore, score, and changeScore. 2:29
    Above the return, we can remove the id variable because the assignment 2:35
    to props.id is now being handled with a destructuring assignment. 2:40
    As you can see, using destructuring to do away with referencing props in multiple 2:47
    places can make your component look cleaner and improve code readability. 2:52
    I'm gonna stop here, but you don't have to. 2:58
    If you like, you can destructure the props passed to the Player, 3:01
    Stats, and AddPlayerForm components too. 3:05

    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