JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://npmcdn.com/react-dom@15.3.2/dist/react-dom.js"></script>
<div id="reactContainer" />

Babel + JSX

const handleEditClick = userId => {
  alert(`edit user ${userId}`)
}

const handleDeleteClick = userId => {
  alert(`delete user ${userId}`)
}

const UserRow = props => (
  <tr>
    <td>{props.user.id}</td>
    <td>{props.user.name}</td>
    <td onClick={handleEditClick.bind(null, props.user.id)}>edit</td>
    <td onClick={handleDeleteClick.bind(null, props.user.id)}>delete</td>
  </tr>
);


const UserTable = props => (
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>NAME</th>
      </tr>
    </thead>
    <tbody>
      {props.users.map(user => <UserRow user={user} />)}
    </tbody>
  </table>
)

const usersSample = [
	{id: 1, name: 'John'},
  {id: 2, name: 'Smith'},
  {id: 3, name: 'Sam'},
]

ReactDOM.render(<UserTable users={usersSample} />, document.getElementById('reactContainer'))