reactjs loop through api response in react

Solutions on MaxInterview for reactjs loop through api response in react by the best coders in the world

showing results for - "reactjs loop through api response in react"
Montserrat
16 Jun 2017
1import React from 'react';
2
3class Users extends React.Component {
4  constructor() {
5    super();
6    this.state = { users: [] };
7  }
8
9  componentDidMount() {
10    fetch('/api/users')
11      .then(response => response.json())
12      .then(json => this.setState({ users: json.data }));
13  }
14
15  render() {
16    return (
17      <div>
18        <h1>Users</h1>
19        {
20          this.state.users.length == 0
21            ? 'Loading users...'
22            : this.state.users.map(user => (
23              <figure key={user.id}>
24                <img src={user.avatar} />
25                <figcaption>
26                  {user.name}
27                </figcaption>
28              </figure>
29            ))
30        }
31      </div>
32    );
33  }
34}
35
36ReactDOM.render(<Users />, document.getElementById('root'));
37