I'll go straight to the point. This is the ponent I have in a ReactJS application:

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 (
      <div>
        <a className="btn btn-success" onClick={handleClick}>
            Add to cart
        </a>
      </div>
    );
  }
}

Why do I get the following error when the ponent is loaded?

Uncaught ReferenceError: handleClick is not defined

EDIT:

After you answers I changed my code to this:

  handleClick(e) {
    e.preventDefault();
    console.log("Item added to the cart");
  }


  renderBooks(){
      return this.props.myBooks.data.map(function(book){
          return (
                  <div className="row">
                    <table className="table-responsive">
                      <tbody>
                        <tr>
                          <td>
                            <p className="bookTitle">{book.title}</p>
                          </td>
                        </tr>
                        <tr>
                          <td>                                  
                             <button value={book._id} onClick={this.handleClick}>Add to cart</button>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
          );
      });
    }
  }

render() {
    return (
      <div>
        <div>
          <h3>Buy our books</h3>
              {this.renderBooks()}
        </div>
      </div>
    );
  }

As you can see I have .map 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.

If I follow @Tharaka Wijebandara answer I can make a button work outside .map but in this case I still get the error:

Uncaught (in promise) TypeError: Cannot read property 'handleClick' of undefined
    at http://localhost:8080/bundle.js:41331:89
    at Array.map (native)

I'll go straight to the point. This is the ponent I have in a ReactJS application:

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 (
      <div>
        <a className="btn btn-success" onClick={handleClick}>
            Add to cart
        </a>
      </div>
    );
  }
}

Why do I get the following error when the ponent is loaded?

Uncaught ReferenceError: handleClick is not defined

EDIT:

After you answers I changed my code to this:

  handleClick(e) {
    e.preventDefault();
    console.log("Item added to the cart");
  }


  renderBooks(){
      return this.props.myBooks.data.map(function(book){
          return (
                  <div className="row">
                    <table className="table-responsive">
                      <tbody>
                        <tr>
                          <td>
                            <p className="bookTitle">{book.title}</p>
                          </td>
                        </tr>
                        <tr>
                          <td>                                  
                             <button value={book._id} onClick={this.handleClick}>Add to cart</button>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
          );
      });
    }
  }

render() {
    return (
      <div>
        <div>
          <h3>Buy our books</h3>
              {this.renderBooks()}
        </div>
      </div>
    );
  }

As you can see I have .map 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.

If I follow @Tharaka Wijebandara answer I can make a button work outside .map but in this case I still get the error:

Uncaught (in promise) TypeError: Cannot read property 'handleClick' of undefined
    at http://localhost:8080/bundle.js:41331:89
    at Array.map (native)

• javascript
• reactjs

3 Answers 3

Use this.handleClick

<a className="btn btn-success" onClick={this.handleClick}>
  Add to cart
</a>

and you have forgot to add e as an argument in your handleClick method.

handleClick(e) {
  e.preventDefault();
  console.log("The link was clicked");
}

Solution for issue you mentioned in edit part.

Reason is, you are loosing the context in map callback function, you need to bind this (class context) with callback function or Use arrow function, it will solve your issue.

By using arrow function:

renderBooks(){
      return this.props.myBooks.data.map((book) => { //here
          return (
                  .....
          );
      });
  }

Or use .bind(this) with callback function, like this:

renderBooks(){
      return this.props.myBooks.data.map(function (book) {
          return (
                  .....
          );
      }.bind(this));    //here
 }

Adding to @Tharaka Wijebandara answer, you can alternatively declare function as const, as follows:

render() {
     const handleClick = this.handleClick;
     return (
         <div>
            <a className="btn btn-success" onClick={handleClick}>
                  Add to cart
            </a>
         </div>
     );
}

where handleClick is defined as:

handleClick(e) {
    e.preventDefault();
    console.log("The link was clicked");
}