Cannot read properties of undefined (reading 'map') in react js while using redux

Question

My backend works perfectly fine, even my redux integration with react js work completely fine but as soon as i use useEffect it gives an error of "Cannot read properties of undefined"

Below is my code:

const ProductListScreen = ({ match }) => {
  const dispatch = useDispatch()

  const shopDetails = useSelector((state) => state.shopDetails)
  const { loading, error, shop } = shopDetails

  useEffect(() => {
    dispatch(shopDetail(match.params.shopid))
  }, [dispatch, match])

  if (loading) {
    return (
      <div className='loader'>
        <Loader />
      </div>
    )
  }

  return (
    <>
      <Link className='btn btn-dark my-3' to='/'>
        Go Back
      </Link>
      <h3>{shop.name} Products</h3>
      {error ? (
        <Message variant='warning' color='red'>
          {error}
        </Message>
      ) : (
        <Row>
          {shop &&
            shop.products.map((product) => (
              <Col key={product._id} sm={12} md={6} lg={4} xl={3}>
                <Product product={product} shopId={shop._id} />
              </Col>
            ))}
        </Row>
      )}
    </>
  )
}

Answer 1

 <Row>
      {shop &&
        shop.products?.map((product) => (
          <Col key={product._id} sm={12} md={6} lg={4} xl={3}>
            <Product product={product} shopId={shop._id} />
          </Col>
        ))}
    </Row>

Use the optional chaining operator in order to skip map of undefined products

Pretty sure, shop it's truthy, so the condition is true, but still you are not checking the truthiness of products when mapping through it