this.setState is undefined

Question

I keep seeing answers that say to use => or .bind(this) but neither of those solutions worked.

import React, { Component } from \'react\';
import { View, Tex         


        

Answer 1

you need to bind your action otherwise you can see error called undefined in your browser there are three methods for binding your action

1. bind the handler in the render method this.chngHandler.bind(this)

for eg-

export class EventBind extends Component{
constructor(){
    super()
    this.state = {
        msg:'hello'
    }
}
chngHandler(){
    this.setState({
         msg:'Good bye'
    })
}
render(){
    return(
        

            {this.state}
            click
        
    )
 } }

2. arrow function approach in render ()=>this.EventHandler()

for example-

export class EventBind extends Component{
constructor(){
    super()
    this.state = {
        msg:'hello'
    }
}
chngHandler(){
    this.setState({
         msg:'Good bye'
    })
}
render(){
    return(
        

            {this.state}
            this.chngHandler()}>click
        
    )
}}`

3.Binding the event handler in the constructor this.EventHandler = this.EventHandler.bind(this) for example-:

export class EventBind extends Component{
constructor(){
    super()
    this.state = {
        msg:'hello'
    }
    this.chngHandler = this.chngHandler.bind(this)
}
chngHandler(){
    this.setState({
         msg:'Good bye'
    })
}
render(){
    return(
        

            {this.state}
            click me 
        
    )
}}

because the binding happens once in the constructor this is better than a binding in the render method

3rd approach can also be done like this -:

export class EventBind extends Component{
constructor(){
    super()
    this.state = {
        msg:'hello'
    }
    this.chngHandler = this.chngHandler.bind(this)
}
// chngHandler(){
//     this.setState({
//          msg:'Good bye'
//     })
// }
chngHandler = ()=>{
    this.setState({
        msg:'Good Bye'
    })
}
render(){
    return(
        

            {this.state}
            click me 
        
    )
}}