What will happen with ES6?

Question

React

Vorpos on this code. How to write in onDelete = this.props.onNoteDelete through ES6 so that the context is not lost?

render() {
    let onNoteDelete = this.props.onNoteDelete; 
    return(
    <div className="notes-grid" ref="grid">
            {this.props.notes.map(note => {
             return (
                <Note 
                key={note.id} 
                color={note.color}
                onDelete={onNoteDelete.bind(null, note)}> // и эта строка
                {note.text} 
                </Note>);   
            })
            }
    </div>
    )
 }

Answer 1

You can do this:
In the component from which you pass the handler, define it as an inline arrow class function :

class Parent {
  onNoteDelete = note => {
    // some stuff
  };
}

Such functions do not lose context. Or, you can bind the handler in the constructor, as advised above. render
method :

render() {
  const { notes, onNoteDelete } = this.props; 
  
  return(
    <div className="notes-grid" ref="grid">
      {notes.map(note => (
        <Note 
          key={note.id} 
          color={note.color}
          onDelete={() => onNoteDelete(note)}
        >
          {note.text} 
        </Note>
       ))}
    </div>
  )
}

For values ​​that are not overridden, it's better to use const rather than let . This way other programmers will immediately see that the value is not overridden and as a result your code will be more readable.

Answer 2

render() {
    let onNoteDelete = this.props.onNoteDelete; 
    return(
    <div className="notes-grid" ref="grid">
            {this.props.notes.map(note => {
             return (
                <Note 
                key={note.id} 
                color={note.color}
                onDelete={()=>onNoteDelete.bind(null, note)}> // и эта строка
                {note.text} 
                </Note>);   
            })
            }
    </div>
    )
 }

or

constructor(props){
super(props)
this.onNoteDelete=this.onNoteDelete.bind(this)
}