title: Uncaught ReferenceError: handleClick is not defined - React
body: <p>I'll go straight to the point. This is the component I have in a ReactJS application:</p>
  
  <pre><code>class BooksList extends Component {
  
    constructor(props) {
      super(props);
      this.handleClick = this.handleClick.bind(this);
  
    }
  
    handleClick() {
      e.preventDefault();
      console.log("The link was clicked");
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;a className="btn btn-success" onClick={handleClick}&gt;
              Add to cart
          &lt;/a&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>Why do I get the following error when the component is loaded?</p>
  
  <pre><code>Uncaught ReferenceError: handleClick is not defined
  </code></pre>
  
  <p><strong>EDIT:</strong></p>
  
  <p>After you answers I changed my code to this:</p>
  
  <pre><code>  handleClick(e) {
      e.preventDefault();
      console.log("Item added to the cart");
    }
  
  
    renderBooks(){
        return this.props.myBooks.data.map(function(book){
            return (
                    &lt;div className="row"&gt;
                      &lt;table className="table-responsive"&gt;
                        &lt;tbody&gt;
                          &lt;tr&gt;
                            &lt;td&gt;
                              &lt;p className="bookTitle"&gt;{book.title}&lt;/p&gt;
                            &lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                            &lt;td&gt;                                  
                               &lt;button value={book._id} onClick={this.handleClick}&gt;Add to cart&lt;/button&gt;
                            &lt;/td&gt;
                          &lt;/tr&gt;
                        &lt;/tbody&gt;
                      &lt;/table&gt;
                    &lt;/div&gt;
            );
        });
      }
    }
  
  render() {
      return (
        &lt;div&gt;
          &lt;div&gt;
            &lt;h3&gt;Buy our books&lt;/h3&gt;
                {this.renderBooks()}
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  </code></pre>
  
  <p>As you can see I have <code>.map</code> which iterate through a list of books.
  For each of the books I have a button that, if clicked, will add the specific book to the user's cart.</p>
  
  <p>If I follow @Tharaka Wijebandara answer I can make a button work outside <code>.map</code> but in this case I still get the error: </p>
  
  <pre><code>Uncaught (in promise) TypeError: Cannot read property 'handleClick' of undefined
      at http://localhost:8080/bundle.js:41331:89
      at Array.map (native)
  </code></pre>