title: React Hooks Mathematics
body: <p>I am brand new to React in general, especially hooks. I am trying to do a very simple algebraic expression on an input form. Ideally, I'd have it automatically update without a calculate button. When I did that I got some weird results that made no mathematical sense. Forgive me for not being able to explain this further, I am an idiotic total loss!</p>
  <p>Some help would be greatly appreciated!</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { useState } from "react";
  import PropTypes from "prop-types";
  import "./App.css";
  
  import MaskedInput from "react-text-mask";
  import NumberFormat from "react-number-format";
  import TextField from "@material-ui/core/TextField";
  import InputAdornment from "@material-ui/core/InputAdornment";
  import AttachMoneyIcon from "@material-ui/icons/AttachMoney";
  import Button from "@material-ui/core/Button";
  
  // import { evaluate } from "mathjs";
  
  // import Input from "./components/inputs/input-field.component";
  
  function TextMaskCustom(props) {
    const { inputRef, ...other } = props;
  
    return (
      &lt;MaskedInput
        {...other}
        ref={(ref) =&gt; {
          inputRef(ref ? ref.inputElement : null);
        }}
        mask={[
          "(",
          /[1-9]/,
          /\d/,
          /\d/,
          ")",
          " ",
          /\d/,
          /\d/,
          /\d/,
          "-",
          /\d/,
          /\d/,
          /\d/,
          /\d/,
        ]}
        placeholderChar={"\u2000"}
        showMask
      /&gt;
    );
  }
  
  TextMaskCustom.propTypes = {
    inputRef: PropTypes.func.isRequired,
  };
  
  function NumberFormatCustom(props) {
    const { inputRef, onChange, ...other } = props;
  
    return (
      &lt;NumberFormat
        {...other}
        getInputRef={inputRef}
        onValueChange={(state) =&gt; {
          onChange({
            target: {
              name: props.name,
              value: state.value,
            },
          });
        }}
        thousandSeparator
        isNumericString
      /&gt;
    );
  }
  
  NumberFormatCustom.propTypes = {
    inputRef: PropTypes.func.isRequired,
    name: PropTypes.string.isRequired,
    onChange: PropTypes.func.isRequired,
  };
  
  function FormattedInputs() {
    const [state, setState] = useState({
      numberformatOH: "150",
      numberformatThird: "30",
      numberformatAvgGross: "38",
      numberformatMin: "20",
      numberformatGoal: "200",
      numberformatMnth: "", // add this values to the state
      numberformatYrly: "",
    });
    
    const handleChange = (event) =&gt; {
      setState({
        ...state,
        [event.target.name]: event.target.state,
      });
      return state;
    };
  
    // const x = Number(state.numberformatAvgGross);
    // const y = Number(state.numberformatGoal);
    // const z = Number(state.numberformatAvgGross);
    
    const onButtonClick = () =&gt; {
  
      
      const numberformatMnth = (
        Number(state.numberformatAvgGross) * 
        Number(state.numberformatGoal) - 
        Number(state.numberformatAvgGross)) / 
        4;
      const numberformatYrly = 12 * (
        Number(state.numberformatAvgGross) * 
        Number(state.numberformatGoal)) - 
        12 * Number(state.numberformatAvgGross);
      setState({
        ...state,
        numberformatMnth,
        numberformatYrly, // update this values when button clicked
      });
      console.log(numberformatYrly);
      console.log(numberformatMnth);
      return state;
    };
  
    return (
      &lt;div className="App"&gt;
        &lt;header className="App-header"&gt;
          &lt;h1&gt;OrderHound Savings Calculator&lt;/h1&gt;
          &lt;body&gt;
            &lt;div&gt;
              &lt;form&gt;
                &lt;div className="input"&gt;
                  &lt;TextField
                    InputProps={{
                      startAdornment: (
                        &lt;InputAdornment position="start"&gt;
                          &lt;AttachMoneyIcon /&gt;
                        &lt;/InputAdornment&gt;
                      ),
                      inputComponent: NumberFormatCustom,
                    }}
                    label="OrderHound Cost"
                    id="outlined-size-numberformatOH"
                    variant="outlined"
                    value={state.numberformatOH}
                    onChange={handleChange}
                    name="numberformatOH"
                  /&gt;
                &lt;/div&gt;
                &lt;div className="input"&gt;
                  &lt;TextField
                    InputProps={{
                      inputComponent: NumberFormatCustom,
                    }}
                    label="3rd Party Percentage Cost"
                    id="outlined-size-numberformatThird"
                    variant="outlined"
                    value={state.numberformatThird}
                    onChange={handleChange}
                    name="numberformatThird"
                  /&gt;
                &lt;/div&gt;
                &lt;div className="input"&gt;
                  &lt;TextField
                    InputProps={{
                      startAdornment: (
                        &lt;InputAdornment position="start"&gt;
                          &lt;AttachMoneyIcon /&gt;
                        &lt;/InputAdornment&gt;
                      ),
                      inputComponent: NumberFormatCustom,
                    }}
                    label="Average Sales Gross"
                    id="outlined-size-numberformatAvgGross"
                    variant="outlined"
                    value={state.numberformatAvgGross}
                    onChange={handleChange}
                    name="numberformatAvgGross"
                  /&gt;
                &lt;/div&gt;
                &lt;div className="online-orders"&gt;
                  &lt;TextField
                    InputProps={{
                      inputComponent: NumberFormatCustom,
                    }}
                    label="Minimum Number of Orders"
                    id="outlined-size-numberformatMin"
                    variant="outlined"
                    value={state.numberformatMin}
                    onChange={handleChange}
                    name="numberformatMin"
                  /&gt;
                  &lt;TextField
                    InputProps={{
                      inputComponent: NumberFormatCustom,
                    }}
                    label="Goal Number of Orders"
                    id="outlined-size-numberformatGoal"
                    variant="outlined"
                    value={state.numberformatGoal}
                    onChange={handleChange}
                    name="numberformatGoal"
                  /&gt;
                &lt;/div&gt;
                &lt;div className="savings"&gt;
                  &lt;TextField
                    InputProps={{
                      startAdornment: (
                        &lt;InputAdornment position="start"&gt;
                          &lt;AttachMoneyIcon /&gt;
                        &lt;/InputAdornment&gt;
                      ),
                      readOnly: true,
                    }}
                    label="Monthly Savings"
                    id="outlined-size-read-only-numberformatMnth"
                    variant="outlined"
                    value={state.numberformatMnth}
                    // onButtonClick={savingsMnth}
                    name="numberformatMnth"
                  /&gt;
                  &lt;TextField
                    InputProps={{
                      startAdornment: (
                        &lt;InputAdornment position="start"&gt;
                          &lt;AttachMoneyIcon /&gt;
                        &lt;/InputAdornment&gt;
                      ),
                      readOnly: true,
                    }}
                    label="Yearly Savings"
                    id="outlined-size-read-only-numberformatYrly"
                    variant="outlined"
                    value={state.numberformatYrly}
                    // onButtonClick={savingsYrly}
                    name="numberformatYrly"
                  /&gt;
                &lt;/div&gt;
                &lt;Button
                  className="button"
                  variant="contained"
                  color="primary"
                  size="large"
                  onClick={onButtonClick}
                &gt;
                  Calculate
                &lt;/Button&gt;
              &lt;/form&gt;
            &lt;/div&gt;
          &lt;/body&gt;
        &lt;/header&gt;
      &lt;/div&gt;
    );
  }
  
  export default FormattedInputs;</code></pre>
  </div>
  </div>
  </p>