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

    Render Components Based on Predicates in Recompose

    Tim KindbergTim Kindberg

    Learn how to use the ‘branch’ and ‘renderNothing’ higher-order components to render nothing when a certain prop condition is met. Sometimes you only want to render a component when valid props exist or are in a certain condition; ‘renderNothing’ is an easy way to completely remove the component when you don’t need to show it.

    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 In my user management application, I'd like to feature a user, and I'd like to do it randomly. I'm currently randomly picking one user from my array of users, and I'm passing it to my featured user component. When I refresh, I should randomly get different users.

    00:19 I don't want to feature any users that are not active. I'm going to make a hideIfNotActive higher-order component, and I'll utilize the Branch higher-order component from Recompose. Branch's first parameter is a predicate. If the user is not active, then I want to renderNothing. renderNothing is another higher-order component from Recompose that just always renders null.

    00:46 Now, I need to implement the predicate user is not active. Branch predicates always take in props. I'll de-structure the status, and I'll check if status is not equal to active. If status is not equal to active, I'd like to render nothing. I need to use my new hideIfNotActive higher-order component, and now I should be able to refresh.

    01:21 When we get a user that's not active, the entire section hides. When they are active, it comes back. The reason it comes back is because implicitly, the third parameter is like an identity parameter. It's optional, and you can render something else, but by default, it will render the wrapped component, which is the featured user.

    Discuss

    Discuss