onClick function is not working in ReactJs on Button

Question

I am new to ReactJs. I am trying to achieve onClick functionality on a button to change the text between <h1> tag. Here is the code

class MessageStateComponent extends Component{

  constructor(){
    super()
    this.state = {
        message: 'Subscribe to NewsLetter'
    }
  }

  changeMessage(){

    this.setState({
        message: 'Thank You'
    })

  }

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

}

export default MessageStateComponent

On clicking the button I am getting this error in the console

TypeError: Cannot read property 'setState' of undefined
changeMessage src/components/MessageStateComponent.js:30
27 | 28 | changeMessage(){ 29 |

30 | this.setState({
| ^ 31 | message: 'Thank You' 32 | }) 33 |

EDIT: When I change

<button onClick = {this.changeMessage}>Subscribe</button> to
<button onClick = {this.changeMessage()}>Subscribe</button>

I am getting this error:

Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Asaf Aviv · Accepted Answer · 2019-12-20 10:22:45Z

5

You need to bind the function in the constructor

constructor() {
  super()
  this.state = {
    message: 'Subscribe to NewsLetter'
  }

  this.changeMessage = this.changeMessage.bind(this)
}

If you use create-react-app it has support for class properties so you can change the function into an arrow function which will bind it automatically(because arrow functions doesn't have this context)

If you are using webpack you can add the class-properties plugin

changeMessage = () => {
  this.setState({
    message: 'Thank You'
  })
}

On the way, if you are have access to class properties through create-react-app or any other plugin, you can omit the constructor and just use class properties

class MessageStateComponent extends Component {
  state = {
    message: 'Subscribe to NewsLetter'
  }

  changeMessage = () => {
    this.setState({
      message: 'Thank You'
    })
  }

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

edited Dec 20, 2019 at 10:22

answered Dec 20, 2019 at 10:11

Asaf Aviv

11.8k2 gold badges33 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rohit Singh Over a year ago

Not all heroes wear the capes :) It worked. Thank you so much @Asaf Aviv

Collectives™ on Stack Overflow

onClick function is not working in ReactJs on Button

EDIT: When I change

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

EDIT: When I change

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related