My Learnings from Building Forms in React: Part 1
Tags: javascript, react, html, css
Published: 2019-07-18 07:26:47

Over the last month or so, I've spent a significant amount of time building, pondering, troubleshooting and Googling how React handles forms. This post, and probably more to follow, is a place for me to think out loud about what I've learned! 

> As a rule, none of my posts are meant to be interpreted as best practices or tutorials. They are meant to be interpreted as musings and ramblings. Should something come across something as inefficient or incorrect, do me a favor and call it out so I can correct my understanding.

I've been working on a volunteer project with the following requirements:

- Users should be able to create an account and submit a form with different field types

- Admin should be able to view registered users' form data and update their account status on a dashboard


# Registration Functionality


The users follow a simple (for them) process to create an account and submit the form:

- Login
- Edit a form
- Preview the form
- Submit the form

# Edit or Preview

The data received from form input fields on the Edit page may be different than what is rendered on the Preview page.

For example, the user inputs their First, Middle and Last Name in three separate fields on the Edit page, but a single Name string is rendered on the Preview page.

A codepen to illustrate (vanilla JS):

{% codepen https://codepen.io/vishalbakshi/pen/gVYOwE %}

Users input data into separate fields as single strings (`first_name`, `middle_name`, `last_name`) and the preview element displays that data differently (`first_name` + ' ' + `middle_name` + ' ' + `last_name`).


# Refresh

Should the user mistakenly refresh the Edit page (which I notoriously do, by accident, when using mobile apps) they would hate to see their form data deleted.

For development purposes, and in order to quickly observe and test the relationship between `state` and the Edit/Preview page form elements without introducing a database into the mix, I am using `localStorage` method to keep the app's `state` updated and saved.

Here's an example codepen to illustrate (using React Hooks):

{% codepen https://codepen.io/vishalbakshi/pen/KOKKmw %}

Here's a video that shows how Local Storage updates upon user input:

{% youtube 3fMh8Ex6FrU %}

Note that the first time I provide inputs, the associated key is added to the Local Storage object and subsequent updates update the value. The following screenshot shows the value of `state` after clicking the Left-Handed checkbox but before `state` is updated. Note the absence of the `left-handed` property after the first click. I used `debugger` to pause chrome at that line.

![](https://thepracticaldev.s3.amazonaws.com/i/n6utrjlb5l7zqj9kstnl.png)

# Dynamic Form Elements

It was a seemingly harmless _Add a Contact_ button but it took a few hours to implement my first untested attempt.

Here's an example codepen to illustrate (using React Hooks):

{% codepen https://codepen.io/vishalbakshi/pen/ZgEQVj %}

Hot diggity! New components are rendered upon clicking the button, and the `contactInfo` object updates accordingly. 

# Looking Ahead

I'll be adding Firebase functionality hopefully tomorrow and will look to write another post about my learnings from that soon enough.

Thanks for reading!

## Follow Me

[YouTube](https://www.youtube.com/channel/UCqvA0CVB3QR3TLpGVzkD35g)
[Instagram](https://www.instagram.com/vbaknation)
[Twitter] (https://twitter.com/vbaknation)