Unable to access React instance (this) inside event handler [duplicate]

Answer 1

Solution:

1. Without explicitly binding, bind with the method name you can use fat arrow functions syntax ()=>{} that maintains the context of this.

import React from 'react'

class SomeClass extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      inputContent: 'startValue'
    }
  }

  sendContent = (e) => {
    console.log('sending input content ',this.state.inputContent);
  }

  changeContent = (e) => {
    this.setState({inputContent: e.target.value},()=>{
      console.log('STATE:',this.state);
    })
  } 

  render() {
    return (
      

        
The input form is here:
        Title: 
         
        Submit
      
    )
  }
}

export default SomeClass

Other Solutions:

2. Bind your functions in the class constructor.

3. Bind your functions in the JSX Template escaping braces {} {this.methodName.bind(this)}