theranbrig / calculator

theran.dev

I'm a Full Stack Web Developer who primarily works in the front end. I am a reformed teacher turned programmer who loves all things code and technology. I was born and raised in Wisconsin and then saw the light by becoming a Gopher at The University of Minnesota (Row the Boat!). I have lived in South Korea for the past 12 years and made a great life with my amazing wife and hilarious son.

I am have done work as a the lead developer for a fashion AR / VR platform. Currently, I am a software engineer for a pretty cool WebRTC platform. I also try to blog when time allows for FreeCodeCamp and contribute to open-source software when I'm not entertaining a toddler. I also love cooking and brewing beer.

calculator's Issues

Having issues with performing calculations

Hey Theran, I want to thank you for writing the your React Context/Hooks guide on FreeCodeCamp's Medium. I've been trying to build a calculator similar to yours but I'm having some trouble with the calculations/doMath function.

If I use the setNumber hook by itself, I can calculate the number correctly. The problem is that after performing my calculation, I also need to clear the storedValue so that it does not display. If I try to use the setStoredValue function, however, it seems my setNumber hook no longer works!

I studied your source code and tried your demo on netlify, and it seems you don't have this issue. Any ideas on where I may have gone wrong with my code?

Here's the file I'm having the most trouble with and would conceivably most related to this issue:

import React, { useState } from 'react'

export const NumberContext = React.createContext();

const NumberProvider = props => {
  const [number, setNumber] = useState('');
  const [storedNumber, setStoredNumber] = useState('');
  const [operatorType, setOperatorType] = useState('');

const handleSetDisplayValue = num => {
  console.log('display rannnn')
  if (!number.includes('.') || num !== '.') {
    setNumber(`${(number + num).replace(/^0+/, '')}`);
  }
};

const handleClearNumber = () => {
  handleSetStoredValue();
}

const handleSetStoredValue = () => {
  setStoredNumber(number);
  setNumber('');
}

const handleClearValues = () => {
  setNumber('');
  setStoredNumber('');
  setOperatorType('');
}

const handleChooseOperatorType = (opType) => {
  if (number) {
    handleSetStoredValue();
    console.log('11111')
    setOperatorType(opType)
  }
  if (storedNumber) {
    console.log('22222')
    setOperatorType(opType)
  }
}

const handleCalculations = () => {
  console.log('calc number', number, 'calcstored', storedNumber)
  if (number && storedNumber) {
  const myValue = Number(number) + Number(storedNumber)
  setNumber(myValue);
  console.log('rrrr')
  console.log('numbererrrr', number)
  }
  handleSetStoredValue('')
  // I need the above function to reset the stored value
  // but if I call that function it seems the setNumber(myValue) does not work correctly.
  console.log('calc number end', number, 'calcstored end', storedNumber)
}

return (
  <NumberContext.Provider
  value={{
    handleClearValues,
    handleSetDisplayValue,
    handleSetStoredValue,
    handleChooseOperatorType,
    handleClearNumber,
    handleCalculations,
    operatorType,
    number,
    setNumber,
    storedNumber, 
    setStoredNumber
  }}
  >
  {props.children}
  </NumberContext.Provider>
);
};

export default NumberProvider;

I also have a GitHub repo with the full source code here.

I highly appreciate any help you or other viewers of this repo may be able to offer!