React Context provider doesn't send the data

Question

So I want to pass totalAmount which is a useState from Restaurant.js to Header.js using context in AuthContext.js. Header.js can receive value from AuthContext.js but Restaurant.js can't pass data to AuthContext.js

Restaurant.js
This is the provider. Sending totalAmount which is a hook useState

import React, { useState, useReducer, useEffect, useContext } from 'react';
import DaftarMenu from './components/Menu/DaftarMenu';
import AuthContext from './components/Context/AuthContext';

const orderReducer = (state,action) =>{ 
 if (action.type==='AMOUNT_INPUT'){
   return {amount: state.amount+parseInt(action.val)};
  }
};

const Restaurant = () => {
const menu = [
  {  
     id: 'e1',
     name: 'Sushi',
     description: 'Finest fish and veggies',
     price: 22.99,
     amount: 0
   },
   {
     id: 'e2',
     name: 'Schnitzel',
     description: 'A German specialty!',
     price: 16.50,
     amount: 0
   },
   {
     id: 'e3',
     name: 'Barbecue Burger',
     description: 'American, raw, meaty',
     price: 12.99,
     amount: 0
   },
   { 
     id: 'e4',
     name: 'Green Bowl',
     description: 'Healthy and green',
     price: 18.99,
     amount: 0
   }
];
 const [daftarMenu, setDaftarMenu] = useState(menu);
 const [inputAmount, setInputAmount] = useState(0);
 const [inputName, setInputName] = useState('');
 const [totalAmount, setTotalAmount] = useState(0);
 const [state,dispatch] = useReducer(orderReducer,{name:'', amount:0});

   useEffect(() => {
    onChangeMenu(inputName);
     },[state.amount]);

   useEffect(() => {
    console.log(daftarMenu);
    console.log(totalAmount);
     },[daftarMenu, totalAmount]);

 const onSaveAmountInput = (event) => { 
  dispatch({type:'AMOUNT_INPUT', val:event});
  setInputAmount(event);
 };

 const onSaveNameInput = (event) => { 
  setInputName(event);
 };

 const onChangeMenu = (name) => { 

 setTotalAmount(totalAmount + parseInt(inputAmount));
 const updatedMenu = daftarMenu.map(obj => {
     if (obj.name === name) {
        return {...obj, amount: obj.amount + parseInt(inputAmount)};
     }
     return obj;
   });
  
  setDaftarMenu(updatedMenu);
 };




   return(

    
        
    
  );
};

export default Restaurant;

AuthContext.js

import React from 'react';

const AuthContext = React.createContext({
  totalAmount: 0
});

export default AuthContext;

Header.js

This is the consumer. Right now I just want to console.log the data received from the provider

import React, {useContext} from 'react';
import AuthContext from '../Context/AuthContext';

const Header = () => {
     const ctx = useContext(AuthContext);
     console.log(ctx.totalAmount);
  return (
      
);
  };
export default Header;

console.log in Header.js results in 0.

React Context provider doesn't send the data

0 Answers