React onClick function with Parameter Returning Undefined

Question

When I run the onEditNoteClick function, I am returned an error that says

  Cannot read property 'onEditNoteClick' of undefined

I'm not sure why I'm getting this issue. To make it simpler, I set the onEditNoteClick parameter to 1 but it still doesn't work.

  constructor(props) {
      super(props);
      this.onEditNoteClick = this.onEditNoteClick.bind(this);
  }

  ......

  onEditNoteClick(id){
    console.log("came to this function");
  }

  renderNotes(note) {
    return (
      <tr key={note.id}>
          <td> {note.name}</td>
          <td> {note.description} </td>
          <td className="edit" onClick={this.onEditNoteClick.bind(this,1)}><i className="fa fa-fw fa-pencil fa-lg"></i> </td>
      </tr>
    );
  }

.....

render(){
   {this.props.notes.map(this.renderNotes)}

I think I need to add a bind method with the notes map, something like this:

   {this.props.notes.map(this.renderNotes).bind(this)}

But I'm not sure what the correct syntax is.

score 2 · Accepted Answer · edited May 23 '17 at 11:45

I think I need to add a bind method with the notes map, something like this:
{this.props.notes.map(this.renderNotes).bind(this)}

That would be incorrect. .bind can only be called on a function, but .map returns an array, not a function. What you have to is set the this value of the this.renderNotes method. The easiest way to achieve this would be to pass this as second argument to .map (see the documentation):

{this.props.notes.map(this.renderNotes, this)}

Alternatively, bind this.renderNotes in the constructor just like you do with the other method:

this.renderNotes = this.renderNotes.bind(this);

and then you can omit the second argument:

{this.props.notes.map(this.renderNotes)}

See also: How to access the correct `this` context inside a callback?

Ah I see, that makes sense. Thank you! – lost9123193 Oct 03 '16 at 22:51 — lost9123193, Oct 03 '16 at 22:51

React onClick function with Parameter Returning Undefined

1 Answers1