Q: How to display different date for each item in an array? I'm working on a note taking app, trying to display the date and time an item was added. I get the correct date, but I have several other problems. Currently it renders a different date on top of the other each time I add a new date. I can also see the date in the textarea of the note component, which I don't really understand why. Each time I add a note, it adds two instead of one. What am I doing wrong?
Here's what I've tried so far:
export const App = () => {

  const [notesList, setNotesList] = React.useState<string[]>([]);
  const [search, setSearch] = React.useState<string>("");
 
  
  const addNote = (): void => {
    const date: Date = new Date();
    setNotesList([...notesList, date.toTimeString(), ""]);
  };

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

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

  React.useEffect(() => {
    const storage_string = sessionStorage.getItem(LOCAL_STORAGE_KEY);
    if (!storage_string) return;
    try {
      const savedNotes = JSON.parse(storage_string) as string[];
      if (savedNotes) setNotesList(savedNotes);
    } catch (err) {
      console.log("error");
    }
  }, []);

  React.useEffect(() => {
    sessionStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(notesList));
  }, [notesList]);

  const getFilteredNotes = (notes: string[], query: string,) => {
    if (!query) {
      return notes;
    }
    return notes.filter((note) => note.includes(query));
  };

  const filteredNotes = getFilteredNotes(notesList, search);
  const updateQuery = (event: React.ChangeEvent<HTMLInputElement>) =>
    setSearch(event.target.value);
  const handleSearch = debounce(updateQuery, 500);

  return (
    <div ref={wrapperRef}>
      <GlobalStyle />
      <SidePanel showSidePanel={showSidePanel}>
        <HeaderContainer>
          <SearchInput
            placeholder="Search notes"
            type="text"
            onChange={handleSearch}
          />
          <Button variant="icon" onClick={addNote}>
            <AddIcon />
          </Button>
        </HeaderContainer>
        {notesList.length > 0 &&
          (filteredNotes && filteredNotes.length > 0 ? (
            filteredNotes.map((note: string, idx: number, date) => (
              <>
              <Note
                onChange={updateNote}
                remove={deleteNote}
                idx={idx}
                text={note}
                date={date.toLocaleString()}
                key={idx}
              />
              </>
            ))
          ) : (
            <Text>No results found</Text>
          ))}
      </SidePanel>
      {showSidePanel ? (
        ""
      ) : (
        <ToggleButton variant="primary" onClick={toggleSidePanel}>
          <NoteIcon width="2rem" height="2rem" />
          Notes
        </ToggleButton>
      )}
    </div>
  );
};


A: *

*In the add Note function you need to add the date inside the note
object ,so that each note has unique creation date, with the current
solution you're just adding a date at the end of the notesList.


*I think that you need to separate the behavior of each functionality
to avoid unnecessary complications you need to add the note using the
form and update upon selection
