Why my state is not getting updated even after writing the setState method?

Question

import React, { Component } from 'react'

class Columns extends Component{ constructor(props){ super(props)

    this.state={
        message:'Hello'
    }
}

changeMessage(){
    
     this.setState=({
         message:'Welcome'
    })
}

render(){
    return(
        <div>
            <div>{this.state.message}</div>
            <button onClick={this.changeMessage}>Click</button>
        </div>
    )
}

} export default Columns

Both answers you received are right, though none of them is really necessary as this.setState = ... is a typo-like problem and the this problem has already been answered a lot on SO. — Emile Bergeron

Aaron Aaron · Accepted Answer · 2020-07-30T19:13:36

As ray hatfield said above, you're losing the this context and need to use an arrow function, but also you're not calling setState; you're overriding it.

Remove the = from

this.setState=({
     message:'Welcome'
})

so that it says:

this.setState({
    message:'Welcome'
})

Why my state is not getting updated even after writing the setState method?

2 Answers