Fetch MultipleAPIs

by Amir Danish

HTML

<div id="app"></div>

CSS

@import url('https://www.w3schools.com/w3css/4/w3.css');
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}
span {
  padding:2px;
}

React

class FetchRandomUser extends React.Component {
     constructor(props) {
        super(props);
        this.state = { AllUsers: [], AusUser: [], CanUser: [], UsUser: [] };
    }

    async componentDidMount() {
        const urls = [
            'https://randomuser.me/api/?results=3',  //only fetch 200 users
            'https://randomuser.me/api/?inc=gender,name,picture,nat=au',
            'https://randomuser.me/api/?inc=gender,name,picture,nat=ca',
            'https://randomuser.me/api/?inc=gender,name,picture,nat=us'
        ];
        Promise.all(urls.map(url =>
            fetch(url)
                .then(checkStatus)
                .then(parseJSON)
                .catch(error => console.log('There was a problem!', error))
        ))
            .then(data => {
                const data_all = data[0];
                const data_au = data[1];
                const data_ca = data[2];
                const data_us = data[3];
                this.setState({
                            AllUsers: data_all,
                            AusUser: data_au,
                            CanUser: data_ca,
                            UsUser: data_us
                        })
            })

        // ------------------------------------------
        //  HELPER FUNCTIONS
        // ------------------------------------------

        function checkStatus(response) {
            if (response.ok) {
                return Promise.resolve(response);
            } else {
                return Promise.reject(new Error(response.statusText));
            }
        }

        function parseJSON(response) {
            return response.json();
        } 
    }

    render() {
        const { AllUsers, CanUser, AusUser, UsUser } = this.state;
        console.log(CanUser.results)
    return (
    <div>
    {
     AllUsers.results&& AllUsers.results.length !== 0 ?
      <ul className="w3-ul w3-card-4">
        { AllUsers.results && AllUsers.results.map((user)=>(
        <li...