title: React typescript with axios response type
body: <p>I'm building a sample web app and using <a href="https://gorest.co.in/public-api/products" rel="nofollow noreferrer">this</a> dummy data api to fetch data. I'm using React with axios to make the api call.The response data looks like following</p>
  <p><a href="https://i.stack.imgur.com/kgeHI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kgeHI.png" alt="api data looks like" /></a></p>
  <p>So I created following interfaces to represent the data.</p>
  <pre><code>export type Category = {
      id: number,
      name: string
  }
  
  export type Product = {
      id: number,
      name: string,
      description: string,
      image: string,
      price: number,
      discount_amount: number,
      status: boolean,
      categories: Array&lt;Category&gt;
  }
  export type ProductResponse = {
      data: {
          code: number,
          data: Array&lt;Product&gt;
      }
  }
  </code></pre>
  <p>I'm tying to fetch data and store in a typed state variable following way</p>
  <pre><code>const [products, setProducts] = useState&lt;Array&lt;Product&gt;&gt;([]);
  
    const fetchProducts = (): void =&gt; {
      const productUrl = &quot;https://gorest.co.in/public-api/products&quot;;
      axios.get&lt;ProductResponse&gt;(productUrl).then((res) =&gt; {
        setProducts(res.data.data);
      });
    };
  
    useEffect(() =&gt; {
      fetchProducts();
    }, []);
  </code></pre>
  <p>There is a type error</p>
  <pre><code>/home/ravinda/myjunkbox/react/react-redux-cake-shop-ts/src/components/Products.tsx
  TypeScript error in /home/ravinda/myjunkbox/react/react-redux-cake-shop-ts/src/components/Products.tsx(12,19):
  Argument of type '{ code: number; data: Product[]; }' is not assignable to parameter of type 'SetStateAction&lt;Product[]&gt;'.
    Type '{ code: number; data: Product[]; }' is not assignable to type '(prevState: Product[]) =&gt; Product[]'.
      Type '{ code: number; data: Product[]; }' provides no match for the signature '(prevState: Product[]): Product[]'.  TS2345
  
      10 |     const productUrl = &quot;https://gorest.co.in/public-api/products&quot;;
      11 |     axios.get&lt;ProductResponse&gt;(productUrl).then((res) =&gt; {
    &gt; 12 |       setProducts(res.data.data);
         |                   ^
      13 |     });
      14 |   };
      15 |
  </code></pre>
  <p>I think I'm trying to extract the product array out of the response and set to the state variable. What am I doing wrong here?</p>