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


Top comments (0)