Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <!-- React 15.1.0 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
  </head>
  <body>
    <div id='root'></div>
  </body>
</html>
 
class Users extends React.Component {
  constructor() {
    super();
    this.state = { users: [] };
  }
  componentDidMount() {
    fetch('https://reqres.in/api/users')
      .then(response => response.json())
      .then(json => this.setState({ users: json.data }));
  }
  render() {
    return (
      <div>
        <h1>Users</h1>
        {
          this.state.users.length == 0
            ? 'Loading users...'
            : this.state.users.map(user => (
              <figure key={user.id}>
                <img src={user.avatar} />
                <figcaption>
                  {user.first_name} {user.last_name}
                </figcaption>
              </figure>
            ))
        }
      </div>
    );
  }
}
ReactDOM.render(<Users />, document.getElementById('root'));
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
fabepro
0viewers