Fetch data from 3rd API

by Allie Yu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Babel + JSX

class App extends React.Component{
	state = {
  	isLoading: true,
    users:[],
    error:null
  }
  
  fetchUsers = () => {
  	fetch(`https://jsonplaceholder.typicode.com/users`)
    .then(response => response.json())
    .then(data => this.setState({
    	isLoading: false,
      users:data
    }))
    .catch(error => this.setState({
    	isLoading:false,
      error
    }));
  }
  
  componentDidMount = () =>{
  	this.fetchUsers();
  }
  
  render(){
  	const {isLoading,users,error} = this.state;
    return(
    	<div>
    	  {error ? <p>{error.message}</p> : null}
        {!isLoading ? (
        	users.map(user => {
          	const {username,name,email} = user;
            return(
            	<div key={username}>
                <p>{name}</p>
                <p>{email}</p>
              </div>
            )
          
          })
        ) : (<h2>Loading</h2>)}
    	</div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById("root"));