Mutating data

Creating and updating data is just as important as fetching data. In this section, we will add an expense creation form and learn how to mutate data in Remix.

Mutating data without JavaScript

Remember the three-step process for building web UIs from Ryan Florence that we discussed in Chapter 1? The first step is to make the user experience work without JavaScript. After that, we add JavaScript to enhance the experience but ensure that the baseline implementation still works. This process is called progressive enhancement.

In this section, we use Remix's action function to handle incoming form submissions on the server. In the `action` function, we will validate the user data and write the new expense object to the database. Let's see how we can use the native form element to submit user data, without the need for client-side JavaScript:

1. First, create a new route module for the expense creation form: app/routes/dashboard.expenses._index.tsx.

   We...