Material-ui Drawer component not rendering internal Items

  arrays, javascript, material-ui, reactjs, redux

I am writing a practice e-commerce application using React.js, @material-ui/core/Drawer and Redux. The problem I have is that whenever I render something manually to the Drawer it shows in it, however, when I render stuff to it using a handleAddToCart function it does not show (render) in the Drawer.

This is the cart component code:

import { StyledButton } from './styles'
import Badge from '@material-ui/core/Badge'
import Drawer from '@material-ui/core/Drawer'
import AddShoppingCartIcon from '@material-ui/icons/AddShoppingCart'
import { useState } from 'react'
import { useSelector } from 'react-redux'
import { ProductPicture } from '../ProductPicture'

export const Cart = function() {
    const { cart } = useSelector(({productReducer}) => ({
      cart: productReducer.cart,
    }))

  const [openCart, setOpenCart] = useState(false)
  return(
    <>
      <StyledButton onClick={() => setOpenCart(true)}>
        <Badge color='error'>
          <AddShoppingCartIcon />
        </Badge>
      </StyledButton>
      <Drawer
        anchor='right'
        open={openCart}
        onClose={() => setOpenCart(false)}
      >
        {!!cart && cart.length > 0 && cart.map(product => {
          <section>
            <h3>Productos en tu carrito</h3>
            <img src={product.productPictures} /> 
            <p>price={product.price}</p> 
            <p>prodname={product.name}</p>
          </section>
          {console.log(cart)}
        })}
        <h3>Productos en tu carrito</h3>
      </Drawer>
    </>
  )
}

This is where I am invoking the cart component:

import axios from "axios"
import { StyledLink } from "./styles"
import { useEffect, useState } from "react"
import { useHistory } from "react-router"
import { Cart } from "../../Components/Cart"
import { NavBar } from "../../Components/Navbar"
import { useDispatch, useSelector } from "react-redux"
import { ProductPicture } from "../../Components/ProductPicture"
import { addToCart, changeProducts } from "../../store/productReducer"


function useApi() {
  const { products } = useSelector(({productReducer}) => ({
    products: productReducer.products,
  }))

  const [error, setError] = useState()
  
  const dispatch = useDispatch()

  useEffect(() => {
    async function getProducts() {
      try {
        const { data } = await axios({
          method: 'GET',
          baseURL: process.env.REACT_APP_SERVER_URL,
          url: '/products',
        })
        dispatch(changeProducts(data))
      }catch(error) {
        dispatch(setError(error))
      }
    }

    getProducts()

    return () => {
      
    }
  }, [])
  
  return { products }
  }
  
 export const HomePage = function() {
   const history = useHistory()
   const dispatch = useDispatch()
   
   function handleClick(prod)  {
     history.push(`/productinfo/${prod._id}`)
   }

   const handleAddToCart = prod => {
    dispatch(addToCart(prod))
  }

    const { products } = useApi()
    return (
      <section>
        <Cart />
        <NavBar />
        {!!products && products.length > 0 && products.map((prod, i) => (
          <section>
            <StyledLink onClick={() => handleClick(prod)}
            >
              <ProductPicture
                key={`chk-${i}`}
                picture={prod.productPictures}
                prodname={prod.name}
                price={prod.price}
              />
            </StyledLink>
            <button
              key={i}
              type='button'
              onClick={() => handleAddToCart(prod)}
            >
              Agregar al carrito
            </button>
          </section>
        ))}
      </section>
    )
}

This is the Redux Reducer where I am storing the state and getting it from:

const CHANGE_PRODUCTS = 'CHANGE_PRODUCTS'
const ADD_TO_CART = 'ADD_TO_CART'
const CHANGE_AMOUNT = 'CHANGE_AMOUNT'

export function changeAmount(value) {
  return {
    type: CHANGE_AMOUNT,
    payload: value,
  }
}

export function changeProducts(value) {
  return {
    type: CHANGE_PRODUCTS,
    payload: value,
  }
}

export function addToCart(value) {
  return {
    type: ADD_TO_CART,
    payload: value,
  }
}
const initialSate = {
  products: {},
  cart: [],
  amount: 0,
}

export function productReducer(state = initialSate, action) {
  switch(action.type) {
    case CHANGE_PRODUCTS:
      return {
        ...state,
        products: action.payload,
      }
    case ADD_TO_CART:
      return {
        ...state,
        cart: [
          ...state.cart,
          action.payload
        ]
      }
    case CHANGE_AMOUNT:
        return {
          ...state,
          amount: action.payload,
        }
    default:
      return state
  }
}

And, this is what happens when I add stuff to the Drawer:

enter image description here

As you can see in the above picture, the cart array has 5 products in it, therefore, the cart.map() should render the items no problem, however, the only thing rendered to it is the <h3>Productos en tu carrito</h3> that I manually put in for testing.

Thanks a lot for your help in the matter, and please consider my lack of experience if the answer happens to be too simple.

Source: Ask Javascript Questions

LEAVE A COMMENT