title: React + Typescript: How to define interface for an array that's populated from componentDidMount?
body: <p>I am exploring React and Typescript and I stuck on a problem of how to define an interface for an array where are stored data from an API.</p>
  <p>Here's what I have:</p>
  <pre><code>interface IState {
    loadingData: boolean;
    apiData: Array&lt;string&gt;;
  }
  
  class Contact extends Component&lt;IProps, IState&gt; {
    constructor(props: IProps) {
      super(props);
      this.state = {
        loadingData: true,
        apiData: []
      };
    }
  
    componentDidMount() {
      const apiUrl = 'http://jsonplaceholder.typicode.com/users';
      fetch(apiUrl)
        .then((response) =&gt; response.json())
        .then((data) =&gt; {
          console.log('This is your data', data);
          this.setState({ loadingData: false, apiData: data });
        })
        .catch(error =&gt; console.log('error: ', error));
    }
    ...
  </code></pre>
  <p>After running this code, though, I receive the following error:</p>
  <pre><code>Error: Objects are not valid as a React child (found: object with keys {id, name, username, email, address, phone, website, company}). If you meant to render a collection of children, use an array instead.
      in div (at Contact.tsx:39)
      in div (at Contact.tsx:33)
      in Contact (created by Context.Consumer)
      in Route (at Main.tsx:26)
      in div (at Main.tsx:23)
      in div (at Main.tsx:16)
      in Router (created by HashRouter)
      in HashRouter (at Main.tsx:15)
      in Main (at src/index.tsx:9)
  </code></pre>
  <p>What's the key to properly set up an interface for an array?</p>
  <p><strong>EDIT:</strong> Adding the <code>render</code> function:</p>
  <pre><code>render() {
      return (
        &lt;div&gt;
          &lt;div&gt;
            &lt;h5&gt;API Data&lt;/h5&gt;
            {this.state.loadingData ? (
                'Loding data...'
              ) : (
                this.state.apiData
              )
            }
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  </code></pre>