Learning React and TypeScript doesn’t have to be hard or boring. It can be fun. This tutorial will show you how to build your own simple budget app using React and TypeScript. It will also show you how to use Web Storage API to make data in your web app persistent.

How to Build a Budget App With React, Typescript & Web Storage API Part 1.

You can find the code on my GitHub (make sure you are on “blog-tutorial” branch).

BudgetItemAdd component

The BudgetItemAdd component will allow to add new item on the list in your budget app. This component will be a modal dialog accessible from the main screen. At the top will be component states for date, title, price and isPaid, created with useReact React hook. These states will get value from input elements.

These inputs will be wrapped inside form element. Your budget app will use a handleFormSubmit function to handle this form. This function will take the values of date, title, price and isPaid states, generate unique id using shortid and call handleAddItem function, passed via props, passing all previous data as an argument.

After this function is called the budget app will automatically reset all local states. It will do so by setting them to their initial values. Then, it will use handleShowAddItem function, passed via props, to automatically close the modal dialog.

// components/budget-item-add

// Import react & shortid
import * as React from 'react'
import shortid from 'shortid'

// Import interface
import { BudgetItemAddInterface } from './../interfaces'

// BudgetItemAdd component
const BudgetItemAdd = (props: BudgetItemAddInterface) => {
  // Prepare BudgetItemAdd states
  const [date, setDate] = React.useState('')
  const [title, setTitle] = React.useState('')
  const [price, setPrice] = React.useState(0)
  const [isPaid, setIsPaid] = React.useState(false)

  function handleFormSubmit(event: React.FormEvent<HTMLFormElement>) {
    // Prevent form from submitting
    event.preventDefault()

    // Create new item
    props.handleAddItem({
      date: date,
      title: title,
      price: price,
      isPaid: isPaid,
      id: shortid.generate()
    })

    // Reset form state
    setDate('')
    setTitle('')
    setPrice(0)
    setIsPaid(false)

    // Close modal window
    props.handleShowAddItem(!props.showAddItem)
  }

  return (
    <div className="modal-wrapper">
      <div className="modal-dialog">
        <button className="btn btn-cross" onClick={() => props.handleShowAddItem(!props.showAddItem)}>⨯</button>

        <form onSubmit={handleFormSubmit}>
          <fieldset>
            {/* Date the item was added */}
            <label htmlFor="date">Date of payment:</label>

            <input
              type="date"
              id="date"
              value={date}
              onChange={(event) => setDate(event.target.value)}
              required={true}
            />
          </fieldset>

          <fieldset>
            {/* Title of the item */}
            <label htmlFor="title">Item name:</label>

            <input
              type="text"
              id="title"
              value={title}
              onChange={(event) => setTitle(event.target.value)}
              required={true}
            />
          </fieldset>

          <fieldset>
            {/* Price of the item */}
            <label htmlFor="price">Item price:</label>

            <input
              type="number"
              id="price"
              value={price}
              onChange={(event) => setPrice(parseInt(event.target.value, 10))}
              min="0"
              step="1"
              required={true}
            />
          </fieldset>

          <fieldset>
            {/* Mark as paid */}
            <input
              className="custom-checkbox-checkbox"
              type="checkbox"
              id="isPaid"
              checked={isPaid}
              onChange={() => setIsPaid(!isPaid)}
            />

            <label className="custom-checkbox-label" htmlFor="isPaid"> Item is already paid</label>
          </fieldset>

          <fieldset>
            <input
              className="btn btn-add"
              type="submit"
              value="+ Add item"
            />
          </fieldset>
        </form>
      </div>
    </div>
  )
}

export default BudgetItemAdd

#typescript #react #web storage api #javascript #design development