Components

Components.jsx

// Without Mapper
const UserName = ({name}) => (
  <p>{name}</p>
)

const UserBio = ({firstName, lastName, birthDate}) => (  //...
  <p>{firstName} {lastName} - {birthDate}</p>
)


// Mapper receives an object and return the formatted object
const userMapper = (data) => {
  firstName: data.name,
  lastName: data.lastName,
  fullName: `${data.name} ${data.lastName}`
  birth: data.birthDate,
};

// Provide api response to the mapper
const userData = mapper(apiResponse);

// You will the userMapper data in your components
const UserName = ({firstName}) => (
  <p>{firstName}</p>
}
// <UserName {...userData} />

const UserBio = ({fullName, birth}) => (
  <p>{fullName} - {birth}</p>
)

// <UserBio {...userData} />