reactjs - React Hooks TypeError: products.map is not a function

Question

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 ?

import SingleProduct from "./SingleProduct";
import axios from "axios";
import { Container, Grid, Grow } from "@material-ui/core";

const Products = () => {
  const [products, setProducts] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const classes = useStyles();

  const getData = () => {
    axios
      .get("http://localhost:4000/api/products")
      .then((res) => {
        setProducts(res.data);
        setLoading(false);
      })
      .catch((err) => {
        console.log(err);
      });
  };

  React.useEffect(getData, []);
  return (
    <div>
        <Container>
          <Grow in>
            <Grid container spacing={6}>
              {products.map((product, index) => (
                <SingleProduct key={index} product={product} />
              ))}
            </Grid>
          </Grow>
        </Container>
    </div>
  );
};

export default Products;

Answer 1

Try to add an other protection at line 43 => https://github.com/muneebghani/semproject/blob/master/client/src/components/products/Products.js

) : products && (products.length === 0) ? (
  toast.error("Error: There are no products in DB", {
    position: toast.POSITION.TOP_CENTER,
    toastId: "",
    transition: Slide,
  })