title: React Hooks TypeError: products.map is not a function
body: <p>Im new to react. Im getting this error products.map is not a function. I didnt get any errors related to .map function before but today it suddenly appeared. Can somebody pls help me fix this ?</p>
  <pre><code>import SingleProduct from &quot;./SingleProduct&quot;;
  import axios from &quot;axios&quot;;
  import { Container, Grid, Grow } from &quot;@material-ui/core&quot;;
  
  const Products = () =&gt; {
    const [products, setProducts] = React.useState([]);
    const [loading, setLoading] = React.useState(true);
    const classes = useStyles();
  
    const getData = () =&gt; {
      axios
        .get(&quot;http://localhost:4000/api/products&quot;)
        .then((res) =&gt; {
          setProducts(res.data);
          setLoading(false);
        })
        .catch((err) =&gt; {
          console.log(err);
        });
    };
  
    React.useEffect(getData, []);
    return (
      &lt;div&gt;
          &lt;Container&gt;
            &lt;Grow in&gt;
              &lt;Grid container spacing={6}&gt;
                {products.map((product, index) =&gt; (
                  &lt;SingleProduct key={index} product={product} /&gt;
                ))}
              &lt;/Grid&gt;
            &lt;/Grow&gt;
          &lt;/Container&gt;
      &lt;/div&gt;
    );
  };
  
  export default Products;
  </code></pre>