Making the most out of a form in React
For my final project at the Flatiron School, I made a personal organization app for gift planning using React and Rails. At the time, I had a lot of events coming up, like birthdays, Mother’s Day, Father’s Day, a wedding and a couple baby showers, and I thought an app to organize gift ideas and remind you of the next upcoming event would be helpful. For good measure, I added some features like a gift budgeter, email reminders, and gift history so you don’t accidentally get your dad the same gift you got him two birthdays ago. Gift Wrap, as it’s called, turned out to be a fun project.
For those interested, check out the live site (create your own account or username: demo — password: 123) or quick demo video!
One of the first challenges with making Gift Wrap was figuring out how to let users add events, people and gifts in the easiest way possible. I wanted the app to offer a lot of options with associating people to events. In some cases, like a person’s birthday, it’s obvious who you are finding a gift for, but maybe for Mother’s Day you want to find a gift for your mom and grandmother. Or for Christmas you might have a whole list of people. To keep track of gift history for each person, it also made sense to have a directory of all of your family and friends and be able to select from this list when creating an event.
The add event form creates new events and adds them to the user’s checklist. It was easy enough to add fields for the event name and date, but I knew this form should associate the event with at least one person. Ideally I wanted to be able to select from existing people and/or create a new person on the spot. It would be too messy for the user to have to go to a different form to add a person to their list.
I was already using Semantic UI React along with custom CSS for styling Gift Wrap, and I decided to research Semantic form input options. I was able to customize a dropdown menu with shorthand props for search, selection, multiple and allowAdditions to fit all of my requirements. Basically every feature you could think of in one input field. The user can search for a person and if the name is highlighted on the existing people dropdown list, pressing enter will add the person to the input, or else pressing enter will add the name to the input and when the form is submitted a new person will be created.
Within the Semantic form, here is what the form field looks like for this dropdown:
The helper function handlePersonAddition is called with the Semantic shorthand prop onAddItem, which is specifically used when the user inputs text other than the dropdown options and presses enter. I have implemented handlePersonAddition to add any inputted text to the list of dropdown menu options, so that name is also available in the dropdown.
The helper function handlePersonChange adds or removes the id number (for existing people) or name (as a string) to an array to be used on submit. On submit, all string names will be used to create new people in the database, connected to the user, and then all people from the form are connected to the newly created event in the database.
And now we can do a lot with this one form input field! I found customizing Semantic UI React components to be very useful.
