Getting an Error in React Code While Making a Calculator

I’m encountering a problem in my code where the calculator is not working as expected. The first issue is that the onClick event for the button is incorrectly set up as onClick={Calculation()}, which executes the Calculation function immediately rather than when the button is clicked. It should be onClick={Calculation} to work properly. Also, there’s a typo in the result element’s id, spelled as "resualt" instead of "result", which prevents the result from being displayed correctly. Furthermore, the line document.querySelector("#resualt") doesn’t do anything useful—it needs to update the result content with the calculation. Additionally, the dropdown options are missing display text, making it unclear what each option represents, and there’s a risk of getting a “Cannot read property ‘value’ of null” error if the elements are not found in the DOM. These issues need fixing for the calculator to function properly.

Error Script:

codeimport 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 error message “Cannot read property ‘value’ of null” occurs because the document.querySelector is not finding the elements with the specified IDs (#valueOne, #valueTwo, or #operators) in the DOM when trying to access their value properties. This can happen if these elements are not yet available in the DOM, or there is a typo in the element IDs.

Issues in the code:

1. Event Handler Issue: The onClick event handler is incorrectly calling the Calculation function immediately. It should be a function reference (onClick={Calculation}), not a function call (onClick={Calculation()}).
2. document.querySelector("#resualt") Error: The line does not do anything because it’s just querying the element. If the intention is to display the calculation result, it needs to update the content of the #resualt element.
3. Empty Option Values: The <option> elements should have text content like “Addition”, “Subtraction”, etc., for user clarity.
4. Typo in the Result ID: The id should be “result” instead of “resualt” to be correctly referenced.

Corrected Code:

codeimport React, { useState } from 'react';

function Calculator() {
    const [result, setResult] = useState(null);

    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;
        }

        setResult(theCalculation);
    }

    return (
        <div>
            <form>
                Value 1: <input type="text" id="valueOne" />
                Value 2: <input type="text" id="valueTwo" />
                Operator:
                <select id="operators">
                    <option value="addition">Addition</option>
                    <option value="minus">Subtraction</option>
                    <option value="multiply">Multiplication</option>
                    <option value="divide">Division</option>
                </select>
                <button type="button" onClick={Calculation}>Calculate</button>
            </form>
            <div id="result">{result !== null ? `Result: ${result}` : ''}</div>
        </div>
    );
}

export default Calculator;

Changes Made:

1. Used useState to manage the result state, which is the preferred way in React to update and render changes.
2. Updated the onClick event to pass the function reference, not the function call.
3. Fixed the typo in the id of the result div.
4. Updated the <option> tags to display meaningful text for the user.

Conclusion

The provided React code for the calculator has several issues that need to be addressed for proper functionality. The main problems include an incorrectly set onClick event, a typo in the id attribute for the result element, unused code lines, and missing display text in the dropdown options. Additionally, there is a risk of runtime errors when accessing element values if they are not found in the DOM. By correcting these issues—ensuring the function is assigned correctly for the button click, fixing the typo, updating the result display, and adding meaningful option labels—the calculator will function as intended, providing a smoother user experience.