Why is the code like this?

Question

React

I'm looking at a lesson on react, there is such an example with creating an application for notes. The code describes the components Note, NoteEditor, NotesGrid and actually all this together NotesApp. I don't really understand the handleNoteAdd function code. Namely, why it is described in one and the other component. Why couldn't it be described in just one place? Why is there a line this.props.onNoteAdd(newNote); and not 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

Why is there a line this.props.onNoteAdd(newNote); and not this.props.handleNoteAdd(newNote)?
First about it. Look at the call to this component. -- this line passes a prop named onNoteAdd , which calls the this.handleNoteAdd function. Therefore, a prop with the name onNoteAdd comes to the component. Everything. You can rename if you want. Why is the function duplicated? It is not duplicated. - The function in the nested component "collects" the note. Well, it reads id, color, creates an object with these parameters and passes it to the parent function. It is better to collect a note in a nested component, because the text of the note is stored in its state. - The function in the parent just pushes a new note to the array of already created ones