Cacher is the code snippet organizer for pro developers

var users = [
  { id: 1, name: "Chris" },
  { id: 2, name: "Jeff" },
  { id: 3, name: "Julie" },
  { id: 4, name: "Jessica" }
];

class UserList extends React.Component {
  render() {
    var users = this.props.users;
    var usersListItems = users.map(function(user) {
      return <div key={user.id}>{user.name}</div>;
    });
    return <div>{usersListItems}</div>;
  }
}

// or

// class UserList extends React.Component {
//   render() {
//     var users = this.props.users;
//     return (
//       <div>
//         {users.map(function(user) {
//           return <div key={user.id}>{user.name}</div>;
//         })}
//       </div>
//     );
//   }
// }