Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Transform Props by using the Recompose mapProps Higher Order Component

    Tim KindbergTim Kindberg

    Learn how to use the 'mapProps' higher-order component to modify an existing component’s API (its props). 'mapProps' takes incoming props and changes them however you’d like; for example, filtering the props by a field.

    reactReact
    ^16.0.0
    recomposeRecompose
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    00:00 I'm displaying three user lists. They're filtered by status. These are my active users, inactive, and pending. I'm doing it by using a simple user list component that I wrote, and filtering the users' array based on the status.

    00:14 I'd like to replace this block of code. I want to hide away the custom filtering logic into some custom components. Instead, we'll have three components. We'll have active users. I just want to pass it to users and have it figure out which ones are active.

    00:37 We'll have inactive users, and we'll have pending users. I'll create active users by calling a higher-order component called Filter by Status. I'm going to tell it I want to filter by the active status and I'll pass it my user list, which is the base component that I want to modify. I'll do the same thing for inactive users and pending users.

    01:14 Now, let's implement Filter by Status. Filter by Status needs to take in a status, and it needs to return a higher-order component. I'm going to make use of the map-props higher-order component from Recompose.

    01:31 Map-props takes in a function. That function takes in the props. We'll take some props in and we'll map them to some new props. The only prop I care to look at is the user's prop.

    01:46 I want to return an object, which will be the new prop object. Map-props completely blows away any props passed in. If they're not in this object, they won't be passed to the wrapped component.

    01:57 I want to pass in status and I want to pass in a new user's prop. This one will take the user's prop coming in, but filter it the same way we were doing before. I'll check if it's equal to the status that I supply.

    02:16 User list now gets the filtered users and the status. I want to add the header into my component. I'll use the status and the word users to create my header. When I refresh, everything continues to behave the same.

    02:41 If I were to change one of the user's statuses, you'll see the filtering logic continues to work.

    Discuss

    Discuss