[React] Cleanly Map Over A Stateless Functional Component with a Higher Order Component

Posted 2020-09-20 Answer1215

In this lesson we‘ll create a Higher Order Component (HOC) that takes care of the key property that React looks for when using map to create elements from a list. This HOC will allow us to wrap any component and it will take care of placing the keyprop on the component for us based on the property name that we specify.

 

Consider following code:

import React from ‘react‘;
import { render } from ‘react-dom‘;

const todos = [
  { id: 1, name: ‘Create the initial state‘, isComplete: true },
  { id: 2, name: ‘Map over data‘, isComplete: true },
  { id: 3, name: ‘Refactor‘, isComplete: true },
  { id: 4, name: ‘Use HOC to remove warning‘, isComplete: false },
];

const TodoItem = (todo) => (
  <li
    style={{
      textDecoration: todo.isComplete ? ‘line-through‘ : ‘‘,
    }}
  >
    {todo.name} 
  </li>
);

const App = (props) => (
  <div>
    <ul>
      {props.todos.map(todo => <TodoItem key={todo.id} {...todo} />)}
    </ul>
  </div>
);

render(<App todos={todos}/>, document.getElementById(‘root‘));

When we trying to render <TodoItem>, we use map function, just because we have to add ‘key‘ attr to each TodoItem. We can improve this by using HoC. A HoC is just a function which takes component as arguement and return a function which render the component:

const withKeyFromProps = (Comp, propName) => (props) => (
  <Comp key={props[propName]} {...props} /> 
); 

 

----