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>

    );

  }

}