Question: I am working on an assignment where I need to access data from an API. Most recently, I see that my code is working to retrieve the data... but when I try to loop over the data and display to my browser... I am getting the error:

Uncaught (in promise) Error: Objects are not valid as a React child (found: object with keys {common, official, nativeName}). If you meant to render a collection of children, use an array instead.

I found similar questions on Stack Overflow... but they were using async/await and not fetch to retrieve their data.

Could someone please explain what I'm doing wrong here?

Code below:

```
import React, { Component } from "react";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
      isLoaded: false,
    };
  }

  // fetches data and sets state which rerenders App
  componentDidMount() {
    fetch("https://restcountries.com/v3.1/all")
      .then((res) => res.json())
      .then((json) => {
        this.setState({
          isLoaded: true,
          items: json,
        });
      });
  }
  render() {
    var { isLoaded, items } = this.state;
    if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (
        <div className="App">
          <ul>
            {items.map((item) => (
              <li key={item.id}>{item.name}</li>
            ))}
            ;
          </ul>
        </div>
      );
    }
  }
}

```

Answer: 
Actually the name property is also an object. Here's an example of its content.

```
{common: 'Malta', official: 'Republic of Malta', nativeName: {…}}

```

In reactJS, you can't render an object like that. You either convert it to a string using for example `JSON.stringify(myobj)` or extract the attributes you want.
In this case you should probably select what you want to display like for example:

```

  render() {
    var { isLoaded, items } = this.state;
    if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (
        <div className="App">
          <ul>
            {items.map((item) => (
              <li key={item.id}>{item.name.common}</li>
            ))}
            ;
          </ul>
        </div>
      );
    }
  }

```

Also I noticed your api can handle internationalization, you can handle it in react using [react-intl](https://www.npmjs.com/package/react-intl) for example.
```
import React, { Component } from "react";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
      isLoaded: false,
    };
  }

  // fetches data and sets state which rerenders App
  componentDidMount() {
    fetch("https://restcountries.com/v3.1/all")
      .then((res) => res.json())
      .then((json) => {
        console.log(json)
        this.setState({
          isLoaded: true,
          items: json,
        }, () => {
          console.log("DONE")
        });
      });
  }
  render() {
    var { isLoaded, items } = this.state;
    if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (
        <div className="App">
          <ul>
            {(items || []).map((item, index) => {
              return <li key={index}>{item.name.common}</li>
            })}
          </ul>
        </div>
      );
    }
  }
}

```