app.tsx

import React, { useState } from "react";
import styled from "styled-components";

import "./App.css";

// Styled components definitions for all components
const Header = styled.header``;
const Nav = styled.nav``;
const MainContent = styled.main``;
const Container = styled.div``;

const InputForm = styled.form`
  border: none;
`;

const InputField = styled.input``;
const NotesList = styled.section``;
const Button = styled.button``;

// React Components Code
const App: React.FC = () => {
  // Managing state with React Hooks
  const [titleValue, setTitleValue]: [
    string,
    (newValue: string) => void
  ] = useState("");

  const [contentValue, setContentValue]: [
    string,
    (newValue: string) => void
  ] = useState("");

  const [notes, setNotes]: [Array<any>, Function] = useState([
    {
      title: "First Note",
      content: "You normally know how things like these turn out, don't you?"
    }
  ]);

  // Event handlers for Input and Content fields
  const handleTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setTitleValue(e.target.value);
  };

  const handleContentChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setContentValue(e.target.value);
  };

  const addNote = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    let newNote = { title: titleValue, content: contentValue };

    setNotes((prevNotes: object[]) => [prevNotes.slice(), newNote]);

    // Empty both Input Fields
    setContentValue("");
    setTitleValue("");
  };

  return (
    <>
      <Header>
        <Nav>
          <Container>
            <a href="/">Notes App</a>
          </Container>
        </Nav>
        <MainContent>
          <Container>
            <InputForm onSubmit={addNote}>
              <InputField
                type="text"
                onChange={handleTitleChange}
                value={titleValue}
              />
              <InputField
                type="text"
                onChange={handleContentChange}
                value={contentValue}
              />

              <Button type="submit">Add Note</Button>

              <NotesList>
                {notes.map(note => {
                  return (
                    <ul>
                      <li>
                        <p>{note.title}</p>
                        <p>{note.content}</p>
                      </li>
                    </ul>
                  );
                })}
              </NotesList>
            </InputForm>
          </Container>
        </MainContent>
      </Header>
    </>
  );
};

export default App;