React API Fetch Not Returning All Data But Does When Indexing

Question

My problem is I get a list of data inside of my FetchData class buy its a list. I tried indexing the countries: data.Countries[0] for example 0 it gave me the values but I want all the data is there a way to do a foreach on this?

Fetch with index on countries: data.Countries[0]

Fetch without index on countries: data.Countries

fetchData.js


import React, { Component } from 'react';
import Countries from './countries';

class FetchData extends Component {
    
    state = {
        loading: true,
        countries: null
    };

    async componentDidMount() {
        const url = 'https://api.covid19api.com/summary';
        const response = await fetch(url);
        const data = await response.json();
        this.setState({
            countries: data.Countries,
            loading: false
        });
    }
     
  render() {
    return (
        <div>
            {this.state.loading || !this.state.countries ? ( 
            <div>loading</div>
            ) : (
            <div> 
                <Countries WorldCountries={this.state.countries.Country} /> 
            </div>
            )}
        </div>
    );
  }
}

export default FetchData;

countries.js

import React, { Component } from 'react'; 

const Countries = (prop) => {
    return(
    <h1>{prop.Countries}</h1>
    );
}
export default Countries;

You're passing "WorldCountries" as a prop but why in Countries component you are looking for "prop.Countries"? — Emad Emami
– Emad Emami, Commented Nov 9, 2020 at 21:14
@EmadEmami Oh my bad was trying something but i changed it back to prop.WorldCountries. — Vaclemor
– Vaclemor, Commented Nov 9, 2020 at 21:20

Aleksey Polonka · Accepted Answer · 2020-11-09 21:51:02Z

2

your images are confusing to me, but if I understood you correctly you need to do following:

  // FetchData component
  ...
  render() {
    return (
        <div>
            {this.state.loading || !this.state.countries ? ( 
            <div>loading</div>
            ) : (
            <div>
              {
                this.state.countries.map(country =>
                    <Country country={country.Country} />)
              }
            </div>
            )}
        </div>
    );
  }
  ...
  // FetchData component 


  // Country component
  const Countries = ({ country }) => (
    <h1>{country}</h1>
  );
  // Country component

edited Nov 9, 2020 at 21:51

answered Nov 9, 2020 at 21:28

Aleksey Polonka

5834 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Vaclemor Over a year ago

I get an error of TypeError: this.state.countries.map is not a function

Aleksey Polonka Over a year ago

@abdullahalhamidi what do you have in this.state.countries? what do you set to countries data.Countries[0] or data.Countries?

Vaclemor Over a year ago

Multiple lists {"Country":"Albania","CountryCode":"AL","Slug":"albania","NewConfirmed":501,"TotalConfirmed":24206,"NewDeaths":2,"TotalDeaths":559,"NewRecovered":90,"TotalRecovered":12092,"Date":"2020-11-09T21:01:31Z","Premium":{}}

Vaclemor Over a year ago

There are more lists per country

Vaclemor Over a year ago

Oh it worked! I had to change the variable <Countries country={country.Country} />) it was <Countries country={country.Counttry} />) THANKS!

Collectives™ on Stack Overflow

React API Fetch Not Returning All Data But Does When Indexing

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related