ReactJS and setState syntax

Question

I am trying to understand the below syntax in my React app. Essentially I wanted to understand the code inside setState()

this.getSomePromise().then(
      // resolve callback function
      someImg =>
        this.setState(prevState => ({
          ...prevState,
          doggo: someImg.message
        })),
      // reject callback function
      () => alert("Rejected!")
    );

What I was expecting was a syntax like this;

    this.setState(prevState => {
// some code
    })

But the round bracket immediately after prevState => is getting me confused.

Answer 1

ES6 arrows use implicit return syntax that allows to skip return keyword. This is implicitly returned object:

this.setState(prevState => ({
  ...prevState,
  doggo: someImg.message
}))

Which is a shortcut for explicit return:

this.setState(prevState => {
 return {
  ...prevState,
  doggo: someImg.message
 }
})

This is object literal that is returned as new state:

{
  ...prevState,
  doggo: someImg.message
}

Not wrapping it with (...) parentheses would result in syntax error because {...} curly braces in object literal would be parsed as function brackets.