[Recompose] Transform Props using Recompose --mapProps

Posted 2020-09-18 Answer1215

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}) => <div>{name} - status</div>;
const UserList = ({users, status}) =>
    <div>
        <h3>{status} User</h3>
        { users && users.map((user, i) => <User {...user} key={i} />) }
    </div>;

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‘ },
];

                <section>
                    <h3>Active users</h3>
                    <UserList users={users.filter(u => u.status === ‘active‘) }/>
                    <h3>Inactive users</h3>
                    <UserList users={users.filter(u => u.status === ‘inactive‘) }/>
                    <h3>Pending users</h3>
                    <UserList users={users.filter(u => u.status === ‘pending‘) }/>
                </section>

 

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

  <div className="App">
    <ActiveUsers users={ users } />
    <InactiveUsers users={ users } />
    <PendingUsers users={ users } />
  </div>;

 

import React from ‘react‘;
import {mapProps} from ‘recompose‘;

const User = ({name, status}) => <div>{name} - status</div>;
const UserList = ({users, status}) =>
    <div>
        <h3>{status} User</h3>
        { users && users.map((user, i) => <User {...user} key={i} />) }
    </div>;

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;