React: Closure x Higher Order Component

react-closure-vs-hoc.md

const ListItems = [
  { id: 1, address: '/link-one', text: 'Link One' },
  { id: 2, address: '/link-two', text: 'Link Two' },
  { id: 3, address: '/link-three', text: 'Link Three' },
  { id: 4, address: '/link-four', text: 'Link Four' },
  { id: 5, address: '/link-five', text: 'Link Five' }
]

Closure

const ListItem = (className) => ({ id, address, text }) => (
  <li key={id} >
    <a href={address} className={className}>{text}</a>
  </li>
)

export default () => (
  <div>
    {ListItems.map(props => ListItem('first-class second-class')(props))}
  </div>
)

HOC

const Item = ({ id, address, className, text }) => (
  <li key={id} >
    <a href={address} className={className}>{text}</a>
  </li>
)

const ListItem = (props) => <Item key={props.id} {...props} className='first-class second-class' />

export default () => (
  <div>
    {ListItems.map(ListItem)}
  </div>
)