Как будет с ES6?
Можно так:
В компоненте в из которого передаете хандлер определяете его как inline arrow class function:class Parent {
  onNoteDelete = note => {
    // some stuff
  };
}
Такие функции не теряют контекст. Либо, можно забиндить хандлер в конструкторе, как посоветовали выше.
Метод render: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>
  )
}
Для значений которые не переопределяются лучше использовать const, а не let. Так другие программисты будут сразу видеть, что значение не переопределяется и как следствие ваш код будет читаемей.
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>
    )
 }
илиconstructor(props){
super(props)
this.onNoteDelete=this.onNoteDelete.bind(this)
}