How to submit a form with SolidJS
Tags: solidjs, typescript, javascript
Published: 2021-09-29 20:45:55

---
title: How to submit a form with SolidJS
published: true
description: How to submit a form with SolidJS
tags: solidjs, typescript, javascript
canonical_url: https://dev.to/csarnataro/how-to-submit-a-form-with-solid-js-286d
series: SolidJS real world use cases

---
## SolidJS
Chances are you have already heard something about [SolidJS](https://www.solidjs.com/), the new reactive (as in [Reactivity](https://dev.to/theaswathprabhu/what-is-reactivity-116f)) UI library for front-end. Think of it as a more performant React, completely built on top of a reactive system.

You may find some similarities with [Svelte](https://svelte.dev) as well. Actually, they share some concepts like _no-virtual-dom_, built-in _stores_ for state management, and other few things.

SolidJS is a relatively new library, [it reached version 1.0](https://dev.to/ryansolid/solidjs-official-release-the-long-road-to-1-0-4ldd) around July 2021, and even if they have  very nice tutorial on their site - you know, increment a counter, decrement a counter, stuff like that - I had to struggle a little bit to implement such a simple thing like submitting a form. Probably this happened because SolidJS requires a bit of a mind shift if you're coming from a React experience. But once you get familiar with the "reactivity-first" approach, everything makes much more sense.

That's why I felt the need to share the results of my initial experiments with SolidJS and forms, step by step.

## Submitting a form (the naive way)

As a first attempt, I tried to add a [signal](https://www.solidjs.com/tutorial/introduction_signals) (the basic unit of reactivity in SolidJS jargon) for each of the fields in my form. You can see the result in this [sandbox](https://codesandbox.io/s/solidjs-submit-form-naive-way-e5123?file=/src/App.tsx). Source code [available on Github](https://github.com/csarnataro/solidjs-forms-example/tree/naive-approach)

{% codesandbox e5123 %}

As you can see in the code, I had to create as many signals as my fields:

```javascript
const [name, setName] = createSignal("");
const [surname, setSurname] = createSignal("");
[...]
```

Then I had to keep track of modifications to each field, using its own "setter" function (e.g. `setName` in the example below):

```jsx
<input
  type="text"
  id="name"
  value={name()}
  onChange={(e) => setName(e.currentTarget.value)}
/>
```

And finally I had to gather each signal with their "getter" functions (e.g. `name()`, `surname()`, etc.) to create an object to submit my data to some backend API service. 

```javascript
    const dataToSubmit = {
      name: name(),
      surname: surname(),
      address: address(),
      shipping_address: sameAsAddress() ? null : shippingAddress()
    };

    // submit to some backend service
```

I was happy with this first result because, well... it worked! But I started to think that having so many `createSignal` in the same simple component was kind of an antipattern. What if I had to add validation for each field? Would I have to add an additional signal for each field, just to keep track of validation errors? And what if I need to disable some fields selectively, based on the value of another field? Another `createSignal` for each of those flags?

## Submitting a form (the SolidJS way)

This didn't look the right approach to me. After digging a little bit deeper into SolidJS documentation I found the concept of [nested reactivity](https://www.solidjs.com/tutorial/stores_nested_reactivity), implemented via the so called `store`s.

Using this approach, my form as a whole can be considered a collection of  `signal`s, possibly dependent on each other. Therefore, the form can be implemented as a `store`.

You can check this new implementation [in this sandbox](https://codesandbox.io/s/solidjs-submit-form-with-store-6kh4c?file=/src/App.tsx). Source code [available on Github](https://github.com/csarnataro/solidjs-forms-example/tree/store-based-approach)

{% codesandbox 6kh4c %}

Here I created a form as a simple store, containing a single object (the set of all fields). You can create more complex stores with nested properties, if needed. SolidJS will allow you to surgically update a single nested property, without cloning the whole store.

```javascript
const [form, setForm] = createStore<FormFields>({
  name: "",
  surname: "",
  address: "",
  shippingAddress: "",
  sameAsAddress: false
});

```
Then I created a utility function to update the store based on the name of the property (so that this function can be reused for all the fields in the form).
```javascript
const updateFormField = (fieldName: string) => (event: Event) => {
  const inputElement = event.currentTarget as HTMLInputElement;
  setForm({
    [fieldName]: inputElement.value
  });
};
```
Having a single object to update (the form) and not multiple individual fields allowed me to create such a utility function.

And finally I can submit my data collecting the needed pieces of information from the `form` object.
```typescript
const dataToSubmit = {
  name: form.name,
  surname: form.surname,
  address: form.address,
  shipping_address: form.shippingAddress
};
```
> _Just as an aside, having to choose between these 2 different approaches recalled me the well-known dilemma between [`useState` VS `useReducer`](https://reactjs.org/docs/hooks-reference.html#usereducer) in React._

Finally, as a bonus, splitting the logic between `App.tsx` (my view) and `useForm.ts` allows me to keep the UI logic separated from my business logic, following the "single responsibility" principle, which incidentally (or not?) is the first "S" in [SOLID](https://en.wikipedia.org/wiki/SOLID) principles.

## Conclusions
SolidJS seems a very promising UI library, very performant and with a very good developer experience. Being relatively young, it's not always easy to find tutorials for some common use cases, like using a form to collect data from a user and submit it to a backend API service.

I hope this post can help you to build your next real world SPA with SolidJS. In the next few weeks I would like to write another post about form validation and better UX when dealing with HTML forms.

---
Cover picture by <a href="https://unsplash.com/@impatrickt?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Patrick Tomasso</a> on <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>