react-50-random-users-solution.js

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

class UserProfiles extends React.Component {
  constructor(){
    super();
    this.state = {
      users: []
    };
  }

  componentWillMount() {
    fetch('https://randomuser.me/api/?results=50')
    .then(response => {
      if(response.ok) return response.json();
      throw new Error('Request failed.');
    })
    .then(data => {
      this.setState({users: data.results});
    })
    .catch(error => {
      console.log(error);
    });
  }

  render() {
    const list = this.state.users.map( (u, i) => {
        return <User key={u.login.md5} name={`${u.name.first} ${u.name.last}`} 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(
  <UserProfiles />,
  document.getElementById('root')
);

bro use functional component
the code was great

Thanks.

Most of these gists are snapshots from live coding examples I wrote while teaching. This would have been refactored at a later point to explain the benefits of using a functional component when state, etc. isn't needed.