Can anyone please help me out: I'm not able to debug the code in Reacts JS

GAGAN MISHRA — Wed, 13 Sep 2023 12:19:59 +0000

I'm a aspiring frontend developer currently learning React JS while making mini projects. Currently working on React Calculator.
When I included handleClick event browser console started showing error

Below is my code

`import React, {Component} from "react";
import CalculatorTitle from "./calculatorTitle.js";
import OutputScreen from "./outputScreen.js";
import Button from "./button.js";

class Calculator extends Component {
constructor() {
super();
this.state = {
question: "",
answer: ""
};
this.handleClick = this.handleClick.bind(this);
}

handleClick(event) {
    const value = event.target.value;

    switch (value) {
        case "=": {
            if (this.state.question !== "") {
                var ans = "";
                try {
                    ans = eval(this.state.question);
                } catch (err) {
                    this.setState({ answer: "Math Error" });
                }
                if (ans === undefined) this.setState({ answer: "Math Error" });
                // update answer in our state.
                else this.setState({ answer: ans, question: "" });
                break;
            }

        }
        case "Clear": {
            this.setState({ question: "", answer: "" });
            break;
        }
        case "Delete": {
            const str = this.state.question;
            const newStr = str.slice(0, str.length - 1);
            this.setState({ question: newStr });
            break;
        }
        default: {
            this.setState(prevState => ({
              question: prevState.question + value
            }));
            break;
          }

}


render() {
    return (
        <>
            <div className="frame">
            <CalculatorTitle value="My Calculator" />
            <div className="mainCalc">
                <OutputScreen question={this.state.question} answer={this.state.answer} />
                <div className="button-row">
                    <Button label={"Clear"} handleClick={this.handleClick} />
                    <Button label={"Delete"} handleClick={this.handleClick} />
                    <Button label={"."} handleClick={this.handleClick} />
                    <Button label={"/"} handleClick={this.handleClick} />
                    <Button label={"7"} handleClick={this.handleClick} />
                    <Button label={"8"} handleClick={this.handleClick} />
                    <Button label={"9"} handleClick={this.handleClick} />
                    <Button label={"*"} handleClick={this.handleClick} />
                    <Button label={"4"} handleClick={this.handleClick} />
                    <Button label={"5"} handleClick={this.handleClick} />
                    <Button label={"6"} handleClick={this.handleClick} />
                    <Button label={"-"} handleClick={this.handleClick} />
                    <Button label={"1"} handleClick={this.handleClick} />
                    <Button label={"2"} handleClick={this.handleClick} />
                    <Button label={"3"} handleClick={this.handleClick} />
                    <Button label={"+"} handleClick={this.handleClick} />
                    <Button label={"0"} handleClick={this.handleClick} />
                    <Button label={"="} handleClick={this.handleClick} />
                </div>


                </div>
            </div>

        </>
    );
}

}
}

export default Calculator;

DEV Community: GAGAN MISHRA

Can anyone please help me out: I'm not able to debug the code in Reacts JS