I get an error in my React code, am making a calculator

Question

//I have an error message "Cannot read property 'value' of null", maybe there are some that can help?

import React from 'react'

function Calculator() {

    function Calculation() {

        const theValueOne = parseInt(document.querySelector("#valueOne").value);
        const theValueTwo = parseInt(document.querySelector("#valueTwo").value);
        const theOperator = document.querySelector("#operators").value;
        let theCalculation;

        if (theOperator === "addition") {
            theCalculation = theValueOne + theValueTwo;
        } else if (theOperator === "minus") {
            theCalculation = theValueOne - theValueTwo;
        } else if (theOperator === "multiply") {
            theCalculation = theValueOne * theValueTwo;
        } else if (theOperator === "divide") {
            theCalculation = theValueOne / theValueTwo;
        }

        document.querySelector("#resualt");
    }
    return (
        <div>
            <form>
                Value 1: <input type="text" id="valueOne" />
                Value 2: <input type="text" id="valueTwo" />
                Operator:
                <select id="operators">
                    <option value="addition"></option>
                    <option value="minus"></option>
                    <option value="multiply"></option>
                    <option value="divide"></option>
                </select>
                <button type="button" onClick={Calculation()}>Calculate</button>
            </form>
            <div id="resualt"></div>
        </div>
    )
}

export default Calculator

The element does not exist until it gets rendered, so you can't access the element's value at the beginning of the component. Retrieve it only when you need to, after render, when there's a `theOperator`. Even better, use React handlers instead of vanilla DOM handlers — CertainPerformance, Dec 01 '20 at 17:45

VersifiXion · Answer 1 · 2020-12-01T17:49:01.627

0

You can use React Hooks to get the value of your inputs and of the operator everywhere in the functional component

import React, { useState } from "react";

function Calculator() {
  const [valueOne, setValueOne] = useState();
  const [valueTwo, setValueTwo] = useState();
  const [operator, setOperator] = useState();
  const [result, setResult] = useState();

  function Calculation() {
  // Here you can access valueOne, valueTwo, operator directly
  let theCalculation;

  ...

  setResult(theCalculation);

Then you can directly get the value of your inputs by adding value and onChange props to your input tags

<form>
Value 1: <input type="number" id="valueOne" value={valueOne} onChange={(e) => setValueOne(e.target.value) />
Value 2: <input type="number" id="valueTwo" value={valueTwo} onChange={(e) => setValueTwo(e.target.value) />
Operator:
<select id="operators" value={operator} onChange={(e) => setOperator(e.target.value)}>
  <option value="addition"></option>
  <option value="minus"></option>
  <option value="multiply"></option>
  <option value="divide"></option>
</select>
<button type="button" onClick={calculation}>Calculate</button>
<div id="resualt">{result}</div>
</form>

edited Dec 01 '20 at 17:49

answered Dec 01 '20 at 17:43

VersifiXion

1,492
5
23

Thank you very much for your help, have written the code like you, but now get an error message after putting value = {theValueOne} onChange = {(e) => setTheValueOne (e.target.value) in the input tags and select tag. Maybe I'm typing it wrong in JSX? I have red lines in the return function, after the input tag. – Super Hero Gang SHG Dec 01 '20 at 18:22
oh yes, try to remove "Value 1: " and "Value 2: " from the JSX – VersifiXion Dec 01 '20 at 18:26
Hi again, I tried it but unfortunately it does not work, It crashes when I have onChange on. – Super Hero Gang SHG Dec 01 '20 at 20:18
maybe try to put `````` instead of ```type="number"``` like before ? – VersifiXion Dec 01 '20 at 20:23
can I see your file somewhere – VersifiXion Dec 01 '20 at 20:24
Yes do you have github? Then I can invite you to my repository. – Super Hero Gang SHG Dec 02 '20 at 09:34

I get an error in my React code, am making a calculator

1 Answers1