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.

 

For example, we have a UserList component:

import React from 'react';const User = ({name, status}) => 
     
      {name} - status
     
;const UserList = ({users, status}) =>    
     
        
      
{status} User
        { users && users.map((user, i) => 
      ) }    
     
;export default UserList;

 

And using it to display three different types of user list:

const users = [    { name: "Tim", status: 'active' },    { name: "Bob", status: 'active' },    { name: "Joe", status: 'pending' },    { name: "Jim", status: 'inactive' },];

     
                    
      
Active users
                    
      
        u.status === 'active') }/>                    
       
Inactive users
                    
       
         u.status === 'inactive') }/>                    
        
Pending users
                    
        
          u.status === 'pending') }/>                
        
       
      
     

 

Now let's say we want to hide the implement detail, instead just showing three different components.

     
    
          
          
        
     
;

 

import React from 'react';import {mapProps} from 'recompose';const User = ({name, status}) => 
     
      {name} - status
     
;const UserList = ({users, status}) =>    
     
        
      
{status} User
        { users && users.map((user, i) => 
      ) }    
     
;const filterByStatus = (status) => mapProps(    ({users}) => ({        status,        users: users.filter(u => u.status === status)    }));export const ActiveUsers = filterByStatus('active')(UserList);export const InactiveUsers = filterByStatus('inactive')(UserList);export const PendingUsers = filterByStatus('pending')(UserList);export default UserList;