Uncaught SyntaxError: Unexpected end of input using React

JavaScript
1

Getting a syntax error, I’m not sure what this means besides just missing a bracket or parenthesis. I went through and checked everything and I’m just not seeing an error, the code also runs completely so I am wondering is there is another reason behind the error that I’m just not understanding.

Link to my codepen: https://codepen.io/joshocon/details/wvjGmdB

2

What does this mean:

      this.setState({
        display: (this.state.display += event.target.value),
        math: eval(this.state.display)
      });

specifically this.state.display += event.target.value. You’re mutating state, right?

3

I’m saying that display = display + the value of the button so that the display isn’t replaced when a new button is pressed.

It appends it all to a string then I’m using eval() to solve when the equals button is pressed.

4

But you are using += so it is mutating state. It’s not your problem, but it is A problem.

5

In react state updates are done this way:

this.setState( state=>({
        display: state.display + event.target.value,
        math: eval(state.display)
      }));

You can do some searches of “update state”.

The error is just telling you that eval isnt a good practice. Why are you using it?

6

The documentation on eval says not to use it, but I figured for my case it’s fine?

7

What happens if you remove it?

8

That is it the old way of updating state and is still valid, though I agree that since it is dependent on the old state, that the functional setState would be better. But that shouldn’t throw and error - you wouldn’t just get an unexpected value in state.

9

I remember the lessons on React saying not to mutate state and how to get around it, but I’m not sure I understand why it is a problem. I’ll go back and reread it!

10

If you have a += b, a will be mutated/changed. All you need there is +.

11

If I remove eval nothing works.

I am taking the display set as a string and then using eval to solve it, then setting the display equal to the solution.

12

eval is inherently dangerous and should be avoided, but it will be very difficult to do this project without it. It’s just part of doing this project.

13

Yes I understand, I have only used it on this project and my vanilla js calculator I made a while back.

14

I would try this instead:

  math: parseInt(state.display,10)
15

parseInt won’t evaluate the math formula.

When I put in some logs to see what is happening:

  updateDisplay = (event) => {
    if (this.state.display == 0) {
      console.log('asdf1', event.target.value)
      console.log('asdf2', this.state.display)
      this.setState({
        display: event.target.value
      });
    } else {
      console.log('asdf3', event.target.value)
      console.log('asdf4', this.state.display)
      this.setState({

        display: (this.state.display + event.target.value),
        math: eval(this.state.display)
      });
    }
  };

I get this output.

asdf1 1
asdf2 0
asdf3 +
asdf4 1
asdf3 1
asdf4 1+
react-dom.js:1716 Uncaught SyntaxError: Unexpected end of input
    at Display.<anonymous> (pen.js?key=pen.js-108c4004-2b34-a8cf-e675-98f9847b00e1:43:33)
    at Object.Rb (react-dom.js:724:7)
    at Xb (react-dom.js:736:6)
    at Yb (react-dom.js:739:6)
    at Ze (react-dom.js:1683:3)
    at se (react-dom.js:1710:11)
    at react-dom.js:2015:5
    at Jb (react-dom.js:6050:12)
    at Nb (react-dom.js:671:12)
    at jd (react-dom.js:1793:3)

I’m just entering 1 + 1.

I think what is happening is that you are running:

eval(this.state.display)

but that is the old this.state.display, before the concatenation of the new character.

I think what you need to do is do the this.state.display + event.target.value math first and store that in a variable, then you can use it in those two properties in the setState.

But I agree that the functional setState would be better here - but probably won’t make a difference in this case.

16

Sorry, I didn’t clarify - I think the issue is that you think eval is getting 1 + 1, but really it’s getting 1 + and it doesn’t know what to do with it - it is not valid JS.

17

So the this.state.display += event.target.value is not updating quick enough for the eval function?

18

Again, that should use +, not +=. But JS needs to evaluate those formulas before it calls setState. Before it can call:

      this.setState({
        display: (this.state.display + event.target.value),
        math: eval(this.state.display)
      });

it first has to figure out what

{
  display: (this.state.display + event.target.value),
  math: eval(this.state.display)
}

is. So, when it does that it will be with the version before setState.

But again, that’s easy to fix. On the line before you call setState (or your return if you switch to a setState with a callback) store the value of this.state.display + event.target.value in a variable and then use that variable in the object.

19

I understand that I shouldn’t mutate state now. Thanks for your help!

20

Cool, that isn’t what was causing your issue, but it is a bad, bad, bad habit. But yeah, I remember learning React, it happened to me a few times. React is confusing at first, but once you get the hang of it, it is very powerful.

Do you understand the issue that is causing the error and why this.state.display isn’t what you are expecting? And the solution?