Accepted answer

Pass *.bind(null,this) instead;

See this Google Groups thread for explanation.


Remove "content = " or create a wrapping div:

<div>     content = 
          <div className="likeCon">
                <div className={ ? "likeButConAct" : "likeButCon"}>
                    <div className="likeB" title={ ? "Unlike" : "Like"} onClick={this.handleClick.bind(this)} >
                    { this.state.likeCount > 0 ? <div className="likeCount">{this.state.likeCount}</div>: null}


You need a root element in your return HTML.


Since v0.4 React autoBind for you. See So you dont need to bind your self


You should understand what bind aim to achieve, and I will explain it here.

Firstly, try to think about who will call handleClick ? i.e. there should be some code like xxx.handleClick, xxx really matter because when you call this.setState inside handleClick, this refer to xxx, and setState only exist in React component, so xxx should refer to the component to achieve what you what, that is why .bind(this) to handleClick, in order to set this to React Component inside handleClick

So now, go back to my first question, if you do not set this explicitly, what is xxx, In plain javascript the onClick callback is global which means there is no xxx, so this should refer to the global object, i.e. window if I am correct. However React set the xxx to React Component in a magic way, that is why you do not need to set it explicitly


In my case, previously I have this,

<input placeholder="URL" id="txt_url" className="form-control"
        value={this.state.url} onChange={this.handleChange.bind(this)}/>

Removing that .bind call solved it

<input placeholder="URL" id="txt_url" className="form-control"
        value={this.state.url} onChange={this.handleChange}/>


react automatically binds methods to this on method call. This is helpful because it allows you to directly pass functions. so to avoid this message just pass null instead of this. refer:AutoBind

Related Query

More Query from same tag