Updating context across components-react.js

Question

I am learning to use useContext with react.js but I now struggle with making it work properly. I am basically trying to create something like a shopping cart, with the cart items being stored in the context. The problem comes when I try to remove an object from the cart because the change doesnt render even tho console.log registers the change...the modal.js apparently just doesnt update.

Modal.js

import React, { useContext } from "react";
import showModal from "../store/meat-context";
import MeatContext from "../store/meat-context";
import CartItem from "./CartItem";
import styles from "./Modal.module.css";

function Modal() {
  const modal = useContext(showModal);
  const { meatState, dispatchMeatState } = useContext(MeatContext);
  if (!modal.showModal) {
    return null;
  }
  console.log(meatState)
  return (
    <div className={styles.backdrop}>
      <div className={styles.modal}>
        
        {meatState.map((meat) => {
          return (
            <CartItem
              name={meat.name}
              price={meat.price}
              id={meat.id}
              key={Math.random()}
              description={meat.description}
            />
            
          );
        })}
      </div>
    </div>
  );
}

export default Modal;

when the modal renders for the first time, it correctly displays and consolelogs the expected content of the cart which looks like this for example:

[
    {
        "name": "Sushi",
        "description": "Finest fish and veggies",
        "price": 22.99,
        "id": "m1"
    },
    {
        "name": "Sushi",
        "description": "Finest fish and veggies",
        "price": 22.99,
        "id": "m1"
    },
    {
        "name": "Schnitzel",
        "description": "A german specialty!",
        "price": 16.5,
        "id": "m2"
    },
    {
        "name": "Barbecue Burger",
        "description": "American, raw, meaty",
        "price": 12.99,
        "id": "m3"
    },
    {
        "name": "Green Bowl",
        "description": "Healthy...and green...",
        "price": 18.99,
        "id": "m4"
    }
]

now when I try to add an item by clicking add, it renders without any problem. But when I try to remove an item, the console.log prints the correct updated state but the cart doesnt render any change. Here is the context for reference:

meat-context.js

import React, { useReducer, useState } from "react";

const MeatContext = React.createContext({ meatState: [] });

export function MeatContextProvider(props) {
  const meatReducer = (state, action) => {
    if (action.type === "ADD_MEAT") {
      return [...state, action.payload];
    }
    if (action.type === "REMOVE_MEAT") {
      for (var i = 0; i < state.length; i++) {
        if (state[i].id == action.payload.id) {
          console.log(state[i].id);

          state.splice(i, 1);
          console.log(state);
          
          return state;
          
        }
        
        
      }
      
    }
    
  };

  const [meatState, dispatchMeatState] = useReducer(meatReducer, []);
  const [showModal, setShowModal] = useState(false);

  if (showModal) {
    document.body.style.overflow = "hidden";
  }

  return (
    <MeatContext.Provider
      value={{
        meatState: meatState,
        dispatchMeatState: dispatchMeatState,
        showModal: showModal,
        setShowModal: setShowModal,
      }}
    >
      {props.children}
    </MeatContext.Provider>
  );
}
export default MeatContext;

Answer 1

Have you tried something like return [...state] in your REMOVE_MEAT condition ? Not sure how reducer works since I don't often use it but you shouldn't return/update the state directly