arrow function not working in react function

Question

I wrote some react JS code here:

import React from "react"

    class App extends React.Component {
        constructor() {
            super();
            this.state = {
                count: 0
            };
            this.handleClick = this.handleClick.bind(this);
        }

        handleClick(prevState){
            this.setState(prevState => {count: prevState.count +1});
        }

        render() {
            return (
                <div>
                    <h1>{this.state.count}</h1>
                    <button onClick={this.handleClick}>Increment</button>
                </div>
            );
        }
    }

This crushed the entire program. Here, arrow function has only one statement, So I removed the brackets and the return keyword, even if I add return keyword, it won't work either.

handleClick(prevState){
    this.setState(prevState => return {count: prevState.count +1});
}

what is happening? What am I missing, thank you

Remove the `return` keyword and put the object in `()`. `this.setState(prevState => ({count: prevState.count +1}));` — Maheer Ali, Nov 07 '19 at 16:21
One line arrow functions have their return statement implicit. You're returning twice `this.setState(prevState => ({count: prevState.count +1}))` — Dupocas, Nov 07 '19 at 16:21
Instead of "describing" the error with _"crushed the entire program"_ you should add any error messages from the browser (and there will definitely be one) — Andreas, Nov 07 '19 at 16:22
Everyone's given you the answer already, but just a bit of context: when you have an arrow function followed by brackets, `(prevState) => {}`, it runs whatever is in the brackets as if it's a normal code block in a normal function, so you've basically written `function(){count: prevState.count +1}`, which doesn't make sense (and I think it's probably a syntax error). On the other hand, an arrow function followed by, for example, a number or string or variable, or by parenthases, with no brackets, directly returns that value, or whatever is inside the parenthases. — TKoL, Nov 07 '19 at 16:26
thank you @TKoL, just I didn't understand the last sentence. you are saying if arrow functions are followed by `()` directly returns the value. Thank you — Mir Stephen, Nov 07 '19 at 17:26
@BasirPayenda https://jsfiddle.net/3b1emc7q/ -- made this to illustrate — TKoL, Nov 07 '19 at 17:31
But yes, the general format of function `const x = () => (n);`, where you're assigning the arrow function to `x` and `n` is basically anything, whether it be a variable, a number, an object, whatever -- later on, when you call the function `x()`, it will return `n` — TKoL, Nov 07 '19 at 17:32

Susie C V · Answer 1 · 2019-11-07T16:51:26.657

There's no need to use prevState, this should solve your problem:

class App extends Component {
  state = {
    count: 0
  };

  handleClick = () => {
   this.setState({
       count: this.state.count + 1  
   })
};


  render() {
    const { count } = this.state;
    return (
        <div>
          <h1>{count}</h1>
            <button onClick={() => this.handleClick(this.state.count)}>Increment</button>
                </div>
            );
        }
    }

Squiggs. · Answer 2 · 2019-11-08T08:50:01.023

0

Think you are missing extra brackets:

handleClick(prevState){
    this.setState(prevState => {
          return {count: prevState.count +1}
    });
}

or wrap the body in brackets.

handleClick(prevState){
    this.setState(prevState => ({count: prevState.count +1}) );
}

Arrow statements confused me for a while, until I started to read them like this, with progressively simpler syntax.

prevState = function(){}
prevState = () => { }
prevState => { }

edited Nov 08 '19 at 08:50

answered Nov 07 '19 at 16:21

Squiggs.

4,299
6
49
89

can you please elaborate further, I am almost new in JS. Why do I have to wrap that with `{}` and use return afterward? there is no need for `return` if there is only one statement – Mir Stephen Nov 07 '19 at 16:26
The alternative to this is to wrap the single statement in brackets. e.g. count => ({ count: prevState.count +1 }); JS thinks your brackets in this instance denote the function body, when they actually denote the object. – Squiggs. Nov 08 '19 at 08:46

score 0 · Answer 3 · answered Nov 07 '19 at 16:30

Here is your code fixed:

import React from 'react'

class App extends React.Component {
  state = {
    count: 0,
  }

  handleClick = () => this.setState(({ count }) => ({ count: count + 1 }))

  render() {
    const { count } = this.state

    return (
      <div>
        <h1>{count}</h1>
        <button onClick={this.handleClick}>Increment</button>
      </div>
    )
  }
}

the bug/error:

this.setState(prevState => {count: prevState.count +1});

the fix:

this.setState(prevState => ({ count: prevState.count + 1 }))

arrow function not working in react function

3 Answers3