Trying to change the text using onclick in React JS

Question

I'm newbie to React JS. I'm trying to workout setState sample program to change the text while clicking the button using below code.

 import React, {Component} from 'react'

 class StateExample extends Component {
constructor(){
    super()
    this.state = {
        message : 'state example'
    }
}
 changeMessage() {
    alert("I was clicked");
    console.log(this);
    this.setState = ({
        message : 'changed to hai'
    })
} 
/* handleEvent = event => {
    alert("I was clicked");
  }; */
render(){
    return ( 
        <div>
        <h2> {this.state.message} </h2>
        <button onClick={() => this.changeMessage()}>Click on me</button>
        </div>

    )
   }
 }

 export default StateExample

No error or warning occurs.alert is working while clicking,but text is not changing.

Console is returning below things which doesn't having setState. Is this the reason?

  [object Object]: {_reactInternalFiber: Object, _reactInternalInstance: Object, context: Object, isMounted: undefined, props: Object...}

 _reactInternalFiber: Object

 _reactInternalInstance: Object

 context: Object
 isMounted: undefined

 props: Object

 refs: Object
 replaceState: undefined

 state: Object

 updater: Object

 __proto__: Object

Notify my mistake.Appreciate your help!!

Neil · Accepted Answer · 2019-07-31 13:12:05Z

2

setState is a function, do not call it with the assignment operator.

Change:

this.setState = ({
    message : 'changed to hai'
})

To:

this.setState({
    message : 'changed to hai'
})

answered Jul 31, 2019 at 13:12

Neil

2,0684 gold badges23 silver badges50 bronze badges

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

Comments

Dupocas · Accepted Answer · 2019-07-31 13:12:13Z

1

setState is a function:

this.setState = ({
    message : 'changed to hai'
})

Change to:

this.setState({
    message : 'changed to hai'
})

answered Jul 31, 2019 at 13:12

Dupocas

21.5k7 gold badges44 silver badges59 bronze badges

Comments

dance2die · Accepted Answer · 2019-07-31 13:14:31Z

1

There are two issues here.

1. Call the `this.setState` to update the state.

It's not a property or an object of this. It's a method you call to update state with. And you should never mutate the state directly, as React wouldn't know that the state has changed. (⚠ do not do e.g.) this.state = {message: 'change to hai'})

You need to update the state like you are calling a method.

this.setState({ message: 'changed to hai' })

2. `this` isn't available within `changeMessage` method.

There are two ways to fix the issue.

Bind the changeMessage within the constructor.

class StateExample extends Component {
  constructor(){
    super()
    this.state = {
        message : 'state example'
    }

    // ...👇 Bind current Component's `this` to `changeMessage`
    this.changeMessage = this.changeMessage.bind(this)
  }
}

Second way is using new ES6 "arrow functions" syntax.

Without adding the bind in the constructor, change the declaration of changeMessage to

changeMessage = () => {
  ...
}

Arrow methods do not create this of its own, thus will be using this from the calling context.

answered Jul 31, 2019 at 13:14

dance2die

37.2k39 gold badges137 silver badges199 bronze badges

2 Comments

Cal Irvine Over a year ago

They are not doing this.state = they are doing this.setState = (which is equally wrong). Otherwise great answer.

dance2die Over a year ago

@CalIrvine I realized it late and updated the answer 😅 Thanks for catching the error 🤜 The answer should reflect that one shouldn't assign a state to setState like an object assignment but call it as a method.

Collectives™ on Stack Overflow

Trying to change the text using onclick in React JS

3 Answers 3

Comments

Comments

1. Call the `this.setState` to update the state.

2. `this` isn't available within `changeMessage` method.

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1. Call the this.setState to update the state.

2. this isn't available within changeMessage method.

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related

1. Call the `this.setState` to update the state.

2. `this` isn't available within `changeMessage` method.