Почему код именно такой?

Question

[PlasterTom]

Просматриваю урок по реакту, там есть такой пример с созданием приложения для заметок. В коде описаны компоненты Note, NoteEditor, NotesGrid и собственно все это вместе NotesApp. Мне не очень понятен код функции handleNoteAdd. А именно, почему она описана и в одном и в другом компоненте. Почему нельзя было ее описать только в одном месте? Почему есть строка this.props.onNoteAdd(newNote); а не this.props.handleNoteAdd(newNote)?

class NoteEditor extends Component {
    constructor(props) {
        super(props);
        
        this.state = {
            text: ''
        }
            
        this.handleTextChange = this.handleTextChange.bind(this);
        this.handleNoteAdd = this.handleNoteAdd.bind(this);
    }
    
    handleTextChange (event){
        this.setState({
            text: event.target.value
        })
    }
    
    handleNoteAdd() {
        let newNote = {
            text: this.state.text,
            color: 'yellow',
            id: Date.now()
        }
        
        this.props.onNoteAdd(newNote);
        this.setState({text: ''});
    }
    
    render() {
    return(
    <div className="note-editor">
        <textarea placeholder="Enter your text here..." 
                  className="textarea" 
                  rows={2}
                  value={this.state.text}
                  onChange={this.handleTextChange}/>
        <button className="add-button" onClick={this.handleNoteAdd}>Add</button>
        
    </div>
    )
}
}

export default class NotesApp extends Component {
    constructor(props) {
        super(props);
        
        this.state = {
            notes: [ тут массив заметок]
        }
        
        this.handleNoteAdd=this.handleNoteAdd.bind(this);
    }
    
    handleNoteAdd (newNote) {
        let newNotes = this.state.notes.slice();
        newNotes.unshift(newNote)
        this.setState ({
            notes: newNotes
        })
    }
    render() {
    return(
    <div className="notes-app" style={{textAlign: "center"}}>
    NotesApp
    <NoteEditor onNoteAdd={this.handleNoteAdd}/>
    <NotesGrid notes = {this.state.notes}/>
    </div>
    )
}
}

Answer 1

[Егор Живагин]

Почему есть строка this.props.onNoteAdd(newNote); а не this.props.handleNoteAdd(newNote)?

Сначала про это. Посмотри на вызов этого компонента.
<NoteEditor onNoteAdd={this.handleNoteAdd}/> -- эта строчка передаёт пропс с именем onNoteAdd , который вызывает функцию this.handleNoteAdd . Поэтому в компонент приходит пропс с названием onNoteAdd Всё. Можешь переименовать, если хочешь.

Почему дублируется функция? Она не дублируется.
- Функция во вложенном компоненте "собирает" заметку. Ну, читает id, цвет, создаёт объект с этими параметрами и передаёт в функцию родителя. Собирать заметку лучше именно во вложенном компоненте, ибо текст заметки хранится в его стейте.
- Функция в родителе просто пушит новую заметку в массив уже созданных