How to update only one property of an object?

user_12130996 0
Viewed 49

I'm working on a not taking app. Each time you add a note, you get an empty text area component that you can edit (write some text) and the date when the note was added. I'm trying to update only the text of the note, so the user can edit, but I'm getting an error from TypeScript: "Argument of type 'string' is not assignable to parameter of type 'INote'".

export const App = () => {

  const [notesList, setNotesList] = React.useState<Array<INote>>([{text: '', date: new Date()}]);

  const updateNote = React.useCallback(
    (idx: number, text: string) => {
      const newList = [...notesList];
      newList.splice(idx, 1, text); 
      setNotesList(newList);
    },
    [notesList]
  );

Here's the list of my notes.

     {notesList.length > 0 &&
          (filteredNotes && filteredNotes.length > 0 ? (
            filteredNotes.map((note: INote, idx: number) => (
              <>
              <Note
                onChange={updateNote}
                remove={deleteNote}
                idx={idx}
                date={note.date}
                text={note.text}
                key={idx}
              />
              </>
            ))
          ) : (
            <Text>No results found</Text>
          ))}
typescript-typings typescript reactjs
1 Answers

You get the error because you are trying to replace the item at the index of idx with a string, while your array is an array of INote. So, you need to pass the new INote object with the updated text as the code below.

const updateNote = React.useCallback(
    (idx: number, text: string) => {
      const newList = [...notesList];
      const newNote = { ...newList[idx], text } // this is the updated note
      newList.splice(idx, 1, newNote);  // pass the note here
      setNotesList(newList);
    },
    [notesList]
);

Or maybe directly change the text property

const updateNote = React.useCallback(
    (idx: number, text: string) => {
      const newList = [...notesList];
      newList[idx].text = text
      setNotesList(newList);
    },
    [notesList]
);
user_114887900
Related