productList is an array from the redux state, it's the actual array of products. The cart is an array of product ids. I set the productsToRender to store the products ids and then extract them in the the ids variable. In the useEffect I am looking for the actual products that are in the cart. The main problem is that my if statements do not check properly if the variables are not empty arrays or null or undefined, the code starts to execute the very bottom of the jsx where I am actually using the products state variable which is [undefined, undefined, undefined]. Therefore throwing an error.

Updated the useEffect , the productList is [] and the if statement does not check it correctly, it prints Effect, after if statement [productList] []

const ProductList = ({ productList, cart }) => {

  const [products, setProducts] = React.useState(null)
  const productsToRender = cart.products
  const ids = productsToRender.map(p => p.productId)

  React.useEffect(() => {
    console.log("Effect [ids]", ids);
    console.log("Effect [productList]", productList);
    if (!productList || productList.length === 0) {
      console.log("Effect, after if statement [productList]", productList);
      let ps = ids.map(id => {
        let product = productList.find(p => p.id === id)
        if (Product) return product
      })
      setProducts(ps)
    }
  }, [productList])

  if (!products || products.length === 0) {
    console.log("Products null or l0", products);
    return <Loading />
  }



... some more jsx


const mapStateToProps = state => {
  return { productList: state.products };
};

export default connect(
  mapStateToProps,
  {}
)(ProductList);