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):
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):
Here's a video that shows how Local Storage updates upon user input:
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.
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):
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!
Top comments (0)