title: Map is not a function when using useState in useEffect
body: <p>I have simple application, which requests API in order to retrieve orders.
  It is react functional component with typescript.</p>
  <p>I just want to display description from all adverts.
  I check many tutorials and also threads here and I change state with <code>useEffect</code>, which contains function, which request data from API and pass it by <code>useState</code>.</p>
  <p>At the beginning, I thought that using <code>useEffect</code>, useState in parent and passing adverts in props to child  is enough.</p>
  <p>Later I did the same in child (<code>GeneralAdvert.ts</code>) file, but I still have the same error that:</p>
  <pre><code>×
  TypeError: adverts.map is not a function
  GeneralAdvert
  D:/reactPhoraTS/reactapp/src/components/Adverts/GeneralAdvert.tsx:19
    16 | });
    17 | 
    18 | 
  &gt; 19 | return &lt;div&gt; 
       | ^  20 |   {
    21 |   adverts.map(advert=&gt; (
    22 |     &lt;p key={advert._id}&gt; {advert.desc} &lt;/p&gt;
  </code></pre>
  <p>Here is parent:</p>
  <pre><code>import React, { useState, useEffect } from 'react';
  import GeneralAdvert from './components/Adverts/GeneralAdvert';
  import FunctionService from './Services/FunctionService';
  import Advert from './Entities/Advert';
  import IAdvert from './Entities/IAdvert';
  
  const fs = new FunctionService();
  
  function App() {
  
    let [adverts, setAdverts] = useState&lt;Advert[]&gt;([]);
    useEffect(() =&gt; {
      const fetchAdverts = async () =&gt;{
        const result = await fs.getAdvertAsync();
        console.log(result)
        setAdverts(result);
      }
  
      fetchAdverts(); 
    },[]);
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;GeneralAdvert 
        items={adverts}/&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>Here is child:</p>
  <pre><code>import React, { useState, useEffect } from 'react';
  import Advert from '../../Entities/Advert';
  import IAdvert from '../../Entities/IAdvert';
  
  interface IGeneralAdvert {
      items: Array&lt;Advert&gt;
    }
    
    function GeneralAdvert(props:IGeneralAdvert) {
  
      const [adverts, setAdverts] = useState&lt;Advert[]&gt;([]);
  
      useEffect(() =&gt; {
          console.log(props.items)
          setAdverts(props.items);
      });
      
      
      return &lt;div&gt; 
        {
        adverts.map(advert=&gt; (
          &lt;p key={advert._id}&gt; {advert.desc} &lt;/p&gt;
        ))} 
      &lt;/div&gt; 
  
        //tried at the beggining with using just props.items 
        //and without setAdvert in useEffet() here, but he same outcome
        // &lt;div&gt;
        // {props.items.map(x =&gt; &lt;h2&gt;{x.desc}&lt;/h2&gt;)}
        // &lt;/div&gt; 
  
    }
  
    export default GeneralAdvert;
  </code></pre>
  <p>Here is simple function:</p>
  <pre><code>async getAdvertAsync(): Promise&lt;Advert[]&gt; {
     let q: Advert[];
          
      let x = await this.syncService.apiAsync&lt;Advert&gt;(&quot;http://localhost:7071/api/getPerson&quot;);
      q = x;
  
      return q;
  }
  </code></pre>
  <p>From console.log:</p>
  <p><a href="https://i.stack.imgur.com/5bLZl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5bLZl.png" alt="Here is also information from logs" /></a></p>