Error in react code missing semicolon in method

My react code has an error that it has a missing semicolon. I will paste the react code down below and paste the error too here.

Here is the react code exact —

import React from "react";
import ReactDOM from "react-dom";


import "./index.css";

class Calculator extends React.Component {
  render() {
    let value = 0;

    add1() {
      value += 1;
    }

    return (
      <div id = "calculator_body" style = {{ width: "100%", height: "100vh", backgroundColor: "lightcyan"}}>

        <textarea id = "value_holder" style = {{width: "100%", height: "20vh", fontSize: "25px"}} readOnly>{value}</textarea>

        <button id = "1_button" className = "buttons-main" style = {{}} onClick = {this.add1}>1</button>
        <button id = "2_button" className = "buttons-main" style = {{}}>2</button>
        <button id = "3_button" className = "buttons-main" style = {{}}>3</button>
        <button id = "4_button" className = "buttons-main" style = {{}}>4</button>
        <button id = "5_button" className = "buttons-main" style = {{}}>5</button>
        <button id = "6_button" className = "buttons-main" style = {{}}>6</button>
        <button id = "7_button" className = "buttons-main" style = {{}}>7</button>
        <button id = "8_button" className = "buttons-main" style = {{}}>8</button>
        <button id = "9_button" className = "buttons-main" style = {{}}>9</button>
        <button id = "0_button" className = "buttons-main" style = {{}}>0</button>


      </div>
    )
  }
}

ReactDOM.render(<Calculator/>, document.getElementById("root"));

Here is the error in the vs code (code editor).

Parsing error: Missing semicolon

   9 |     let value = 0;
  10 |
> 11 |     add1  () {
     |              ^
  12 |       value += 1;
  13 |     }
  14 |eslint

And here is the error that i am getting on the main screen i mean on the chrome page i am viewing.

./src/index.js
SyntaxError: C:\Users\dell\Desktop\Programming\React Js Projects\project_learn_2\project_learn_2\src\index.js: Missing semicolon (11:10)

   9 |     let value = 0;
  10 |
> 11 |     add1() {
     |           ^
  12 |       value += 1;
  13 |     }
  14 |

I don’t know what to do here. I am trying on my own to make a calculator.

I am not really sure what you’re trying to achieve but I know you are in the process of making a calculator. From my point of view, you should consider using constructor & super where the state can be initialized and changed later on with the help of this.setState() and binding.

More info about what I have said →
this.state Codecademy React course

yeah well thanks, but, i was asking in this post about why my error is there? I was asking about my error

I know you’re asking about your error but have you consider using constructor, super, this.setState(), binding & of course event handlers? Those are the basics that will get you started on building a calculator using React.

yeah i am learning i just fancied trying to create a calculator. i am still learning

You can’t just simply just code it like this in React.

And also take note of the onClick above, you have used dot notation with this . Event handlers should always be bind with this in constructor keyword. For example:
this.methodName = this.methodName.bind(this) .

1 Like

alright but why i can’t code like this react? i am just declaring a method. and this is how codecademy told me to create a method, and call it in the react course

That’s just the rule of React.

A method would usually combine with this.setState() to update its state.

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = { weather: 'sunny' };
    this.makeSomeFog = this.makeSomeFog.bind(this);
  }
 
  makeSomeFog() {
    this.setState({
      weather: 'foggy'
    });
  }
}

Take a look at this example, once you added an event handler to makeSomeFog(). For instance, onClick, it would changed its state from sunny to foggy. The same goes for the calculator, when you clicked, the state changed either, add, minus, multiple, or divide.

I’m sorry to ask this have you fully understand what the Codecademy React course is teaching? Codecademy gave you clear explaination about method here. It would be better if you understand JavaScript fundamentals.

1 Like