react-user-json-solution.js

import React from 'react';
import ReactDOM from 'react-dom';

class UserList extends React.Component {
  render() {
    const users = [{"id":1,"first_name":"Kevyn","last_name":"Charrette","email":"[email protected]"},
{"id":2,"first_name":"Katha","last_name":"Borham","email":"[email protected]"},
{"id":3,"first_name":"Clareta","last_name":"Mawford","email":"[email protected]"}];

    const list = users.map( u => {
      return <User key={u.id} name={`${u.first_name} ${u.last_name}`} email={u.email} />;
    });

    return (
      <div>
        <h1>My users are:</h1>
        {list}
      </div>
    );
  }
}

class User extends React.Component {
  render() {
    return (
      <div style={{'borderStyle': 'dotted'}}>
        <h3>{this.props.name}</h3>
        <p>{this.props.email}</p>
      </div>
    );
  }
}

ReactDOM.render(
  <UserList />,
  document.getElementById('root')
);