You can do what Mayank said, but there is another way - using arrow functions. That way, the function will automatically take 'this' of the class instance.

It will be something like the below. You will have to remove the binding that you did originally, of course.

class Reactapp extends React.Component{ sayMassage = () => { console.log(this.props.children); } render(){ return( <div> <h3> Hello {this.props.word}</h3> <p><a href="#" onClick={this.sayMassage}>Click Me</a></p>; </div> ); } } ReactDOM.render( <div> <Reactapp word="React">This is a ReactJS 15.5 Tutorial</Reactapp> </div>, document.getElementById('root') ); 

You can do what Mayank said, but there is another way - using arrow functions. That way, the function will automatically take 'this' of the class instance.

It will be something like the below. You will have to remove the binding that you did originally, of course.

class Reactapp extends React.Component{ sayMassage = () => { console.log(this.props.children); } render(){ return( <div> <h3> Hello {this.props.word}</h3> <p><a href="#" onClick={this.sayMassage}>Click Me</a></p>; </div> ); } } ReactDOM.render( <div> <Reactapp word="React">This is a ReactJS 15.5 Tutorial</Reactapp> </div>, document.getElementById('root') ); 

P.S. There is a typo in the function name, sayMassage (should be sayMessage), unless you actually wanted to say Massage :-)