notes.jsx

const NotesList = () => {
  const [notes, setNotes] = useState([{tile: '...', text: '...'}]);
  
  const saveNote = (noteId, newData) => {
    // api call here
    setNotes(oldNotes => oldNotes.map(note => note.id === noteId ? {...newData} : note));
  }

  return (
    <div>{notes.map(note => <Note note={note} saveNote={(newData) => saveNote(note.id, newData)}/>)}</div>
  );
}

const Note = ({ note, saveNote }) => {
  // tuka pravilno li e da kopiram data-ta, ako iskam da editvam child-a inline ili ima po dobur nachin?
  // ako go pravq tva, trqbwa li da imam useEffect v koito ako mi se promeni note prop-a da setvam na novo localNote?
  const [localNote, setLocalNote] = useState({...note});

  return (
    <form onSubmit={() => saveNote(localNote)}>
      <input onChange={e => setLocalNote({...localNote, title: e.target.value})}/>
      <input onChange={e => setLocalNote({...localNote, text: e.target.value})}/>
      <input type="submit"/>
    </form>
  )
}