Stack Exchange
Ternary operator with map of undefined
This is the error in a browser I have used ternary operator to sort it but it's still not working.

TypeError: Cannot read property 'map' of undefined

My code is:
const HomeScreen  = () => {

const productList = useSelector(state => state.productList);
const { products, loading, error} = productList;
const dispatch = useDispatch();

useEffect(() => {
    dispatch(listProducts());        
    
}, [])

return ( 
    loading ? <div>Loading...</div>:
        error ? <div>{error}</div> : 
            <ul className="products">
              {
                products.map(product =>
                <li key={product._id}>
                    <div className="product">


productList does not contain the property products. Can you console.log(productList) and provide the value (console it before the return)?

Please update the code snippet with full code.. this contains alot of missing brackets.. painful to read and figure out

products may not have been loaded at the time you call the map on it, to make sure that products is loaded before mapping over it, change products.map(product => to products && products.length && products.map(product =>
