react 16

new_react.jsx

import React from 'react';

const ListWrapper = ({ children }) => (
  <div className='people-list-wrapper'>
    <ul className='people-list'>
      {children}
    </ul>
  </div>
);

const PersonName = ({ text }) => <span className='person-name'>{text}</span>;

const DeleteButton = ({ text, handler }) => <span className='delete-button' onClick={handler}>{text}</span>;

const PersonRow = ({ children }) => <li className='person-row'>{children}</li>

const People = ({ people, onDelete }) => people.map(({ id, name }) => (
  <PersonRow key={id}>
    <PersonName text={name} />
    <DeleteButton text='X' handler={() => onDelete(id)} />
  </PersonRow>
));

const PeopleList = props => (
  <ListWrapper>
    <People {...props} />
  </ListWrapper>
);

export { PeopleList };