noob - react typescript todo

Question

could you please help me with a simple issue? I've always been programming in React, but I was always using pure js. Recently tried to transition to TS and I hate every single bit of it, but trying to understand all this hype. Could you please just give me an example of good usage of typescript using the bit of the code that I wrote? It's a simple to-do list, but have all the problems that I encountered - and in JS it would work!

Just show me how it should be done and I will try to write the real applications after figuring out the right logic behind it.

const NoteApp = () => {
  const [notes, setNotes] = useState<Array<string>>()
  const [title, setTitle] = useState<string>('')
  const [body, setBody] = useState<string>('')

  const addNote = (e:any) => {
      e.preventDefault()

      setNotes([
          ...notes,
          { title, body }
      ])
      setTitle('')
      setBody('')
  }

  const removeNote = (title:any) => {
      setNotes(notes.filter((note) => note.title !== title))
  }

  return (
      <div>
          <h1>Notes</h1>
          {notes.map((note) => (
              <div key={note.title}>
                  <h3>{note.title}</h3>
                  <p>{note.body}</p>
                  <button onClick={() => removeNote(note.title)}>x</button>
              </div>
          ))}
          <p>Add note</p>
          <form onSubmit={addNote}>
              <input value={title} onChange={(e) => setTitle(e.target.value)} />
              <textarea value={body} onChange={(e) => setBody(e.target.value)}></textarea>
              <button>add note</button>
          </form>
      </div>
  )
}

Answer 1

Typescript is just a tool to keep you code more redeable and less buggy. It provide you way to ensure that ~90% of something is undefinded error are gone. In this situation you can declare shape of your note like that

type Note = {
    title: string;
    body: string;
};

const NoteApp = () => {
    const [notes, setNotes] = useState<Array<Note>>([]);
    const [title, setTitle] = useState<string>('');
    const [body, setBody] = useState<string>('');

    const addNote = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();

        setNotes([...notes, { title, body }]);
        setTitle('');
        setBody('');
    };

    const removeNote = (title: string) => {
        setNotes(notes.filter((note) => note.title !== title));
    };

    const onTileChange = (e: React.ChangeEvent<HTMLInputElement>) => setTitle(e.target.value);
    const onBodyChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => setBody(e.target.value);

    return (
        <div>
            <h1>Notes</h1>
            {notes.map((note) => (
                <div key={note.title}>
                    <h3>{note.title}</h3>
                    <p>{note.body}</p>
                    <button onClick={() => removeNote(note.title)}>x</button>
                </div>
            ))}
            <p>Add note</p>
            <form onSubmit={addNote}>
                <input value={title} onChange={onTileChange} />
                <textarea value={body} onChange={onBodyChange} />
                <button type="submit">add note</button>
            </form>
        </div>
    );
};