I am stuck with an issue that I don't understand with binding. I tried all ways of binding in all questions relative to this issue in StackOverflow but every time I have the same

Error: "React Cannot read property 'bind' of undefined"

Error2:"TypeError: Cannot read property '__reactInternalInstance$b7iw1elmz95' of null at Object.getClosestInstanceFromNode"

Because I've tried everything, I wonder if is that a real problem with the binding of an external problem.

What I want to do is when I click on a button, another content appear.

Here is my code :

import React, {Component} from 'react';

export default class Projects extends Component {
  constructor(){
    super();

    this.state = {
      onShow: false,
      opacity: 0,
      height: 0
   }
 }

  OnShow(){
    this.setState({
      onShow: !this.state.onShow,
      opacity: this.state.opacity === 0 ? 1:0,
      height: '100vh'
    });
  }

  render(){

    return(
      <div>
        <h2>blabla</h2><p>some extra blabla</p>
        <button onClick={this.onShow.bind(this)}>
          <div opacity={this.state.opacity}>YO</div>
        </button>
      </div>
    );
  }
}

I am stuck with an issue that I don't understand with binding. I tried all ways of binding in all questions relative to this issue in StackOverflow but every time I have the same

Error: "React Cannot read property 'bind' of undefined"

Error2:"TypeError: Cannot read property '__reactInternalInstance$b7iw1elmz95' of null at Object.getClosestInstanceFromNode"

Because I've tried everything, I wonder if is that a real problem with the binding of an external problem.

What I want to do is when I click on a button, another content appear.

Here is my code :

import React, {Component} from 'react';

export default class Projects extends Component {
  constructor(){
    super();

    this.state = {
      onShow: false,
      opacity: 0,
      height: 0
   }
 }

  OnShow(){
    this.setState({
      onShow: !this.state.onShow,
      opacity: this.state.opacity === 0 ? 1:0,
      height: '100vh'
    });
  }

  render(){

    return(
      <div>
        <h2>blabla</h2><p>some extra blabla</p>
        <button onClick={this.onShow.bind(this)}>
          <div opacity={this.state.opacity}>YO</div>
        </button>
      </div>
    );
  }
}

• javascript
• reactjs
• data-binding
• bind

• It a typo. Your method name is OnShow and you are doing this.onShow – bennygenel Commented Oct 12, 2017 at 10:28

3 Answers 3

There is a typo in onClick on button: this.OnShow.bind(this) is the right way.

Function is named OnShow, the state var is named onShow

First, there's a typo in your function name call.

But also, instead of manually binding this, I would recommend letting JS do the binding automatically, by using an Arrow Function syntax :

OnShow = () => {
    // your code here
  }

render(){

    return(
      <div>
        <button onClick={this.OnShow}>
mybutton
        </button>
      </div>
    );
  }

It's more elegant and saves you time.

It's a typo mistake :

Original function is :

OnShow(){ ... }

So , Please change :

From :

this.onShow.bind(this)

To :

this.OnShow.bind(this)