Console throws an error with useReducer on a calculator app

45 Views Asked by At

My first try on working with useReducer() on a calculator mini-project. But is throws an error whenever I try clicking on buttons:

console errors

line 136 (const inside App function) in my code looks alright?

function App() {
  const [{ currentOperand, previousOperand, operation }, dispatch] = useReducer(
    reducer,
    {}
  )

I'm using reducer function here with switch statements for math operations

function reducer(state, { type, payload }) {switch(type)...}

dispatch is used on buttons like this

<DigitButton digit = "0" dispatch={dispatch}/>

and the exported component of buttons

export default function DigitButton ({ dispatch, digit }) {
 return <button className="btn" onClick = {() => dispatch({ type: actions.add_digit, payload: { digit}})}>{digit}</button>
};

and the imports are here just in case

import { useReducer } from 'react'
import DigitButton from './DigitButton'
import OperationButton from './OperationButton'
import './App.css'

I'm a beginner so I'm totally lost and can't figure what even might be the problem.

Codesandbox link

0

There are 0 best solutions below