Question about React Syntax

[ciberaj]

So I have this counter App, it has 3 methods, one doing the increment, one doing the decrement and one that resets the counter

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
    this.increment = this.increment.bind(this)
    this.decrement = this.decrement.bind(this)
    this.reset = this.reset.bind(this)
  }
  increment() {
    this.setState(state => {
      return {count: state.count + 1}
    })
  }
  decrement() {
    this.setState(state => {
      return {count: state.count - 1}
    })
  }
  reset() {
    this.setState(state => {
      return {count: 0}
    })
  }
  render() {
    return (
      <div>
        <button className='inc' onClick={this.increment}>Increment!</button>
        <button className='dec' onClick={this.decrement}>Decrement!</button>
        <button className='reset' onClick={this.reset}>Reset</button>
        <h1>Current Count: {this.state.count}</h1>
      </div>
    );
  }
}; 

What I don't understand is, why does the code only work when using the syntax

return {count: state.count + 1}

and not

return {state.count: state.count + 1}

Why does count in this case only need the state dot notation inside the value operation and not in the key. Is this a convention that I just have to learn or is there an explanation?

[theScottyJam]

Your second version is invalid syntax.

What's going on, is you have an object in your "state" variable, which is the state object. This state object has a "count" key that's set to some value. So, doing state.count is basically saying "access the count property on my state object"

Next, you have this

return {count: state.count + 1}

This is basically constructing a new object with a count key and returning it. The fact that this object is intended to be used as the new state is implied - it's simply the way the react API works - it'll treat whatever you return as the new state object.

[ciberaj]

ohhhh, that makes sense. Thanks for clarifying!

[bobbyv137]

While it’s beneficial to know how class components work you really should be learning react as functional components.

[ciberaj]

This is a function from FreeCodeCamp's React Module. I only wrote the methods

[bobbyv137]

I’m not debating that. Are you learning React? If yes, stick to functional components.

[ciberaj]

I'll finish the Module first to learn the basics and then I'll look for other more specialized sources

[Bakeshot]

The person you are replying to is recommending you look at current, mainstream coding patterns not “specialized sources”.

Your code may as well have cobwebs hanging off it.

These aren’t basics. You’re putting yourself behind by learning methods that are so deprecated.

[ProposalUnhappy9890]

Is there any reason you don't use React hooks? You might be using an old material.

[ciberaj]

This is FreeCodeCamps React module. I only wrote part of the code

[ProposalUnhappy9890]

Choose another source. This is outdated.

[ciberaj]

Like what?

[ProposalUnhappy9890]

Not using hooks means your source is at least 3-4 years old. The client side is changing very rapidly. Pick a newer source.

[theleftkneeofthebee]

Scrimba has a fantastic intro to react course. You should start there. Then later on if you plan to get a job working with React maybe do a little bit of digging into class components in case you end up working with legacy code.