curdview.js

import React from "react";
import { render } from "react-dom";
import "bootstrap/dist/css/bootstrap.css";
import { USERS } from "./mock-data/users";

class UserList extends React.Component {
  state = {
    users: USERS,
    selectedUser: {}
  };
  //Not listener function: normal biz api
  onSelect = user => {
    console.log(user);
    this.setState(() => {
      return {
        selectedUser: user
      };
    });
  };
  render() {
    return (
      <div className="container">
        <nav>
          <h1>User List App</h1>
        </nav>
        <hr />
        <ul>
          {this.state.users.map((user, index) => {
            return (
              <li
                onClick={() => {
                  this.onSelect(user);
                }}
                key={index}
              >
                {user.name}
              </li>
            );
          })}
        </ul>
        <h4>User Details</h4>
        <div>
           {this.state.selectedUser.email}
        </div>
      </div>
    );
  }
}
render(<UserList />, document.getElementById("root"));