Create a Reusable Form with React Bootstrap
Let’s face it, forms are hard for everyone especially in React. If your a Jr. developer, this can downright scary and may take you hours of googling to get them to where you want them. However, hopefully this article will help speed up your form component development time.
The component I’m about to build is easy for beginners. I will give you a step by step explanation on how to build the form. This form uses React Bootstrap and Styled Components, if you don’t know React Bootstrap or want to learn more about my journey with it read about it here. You can use this form without it but you’ll have to inject your own CSS styles either through 100% Styled Components or Style Sheet.
Now onto the fun stuff, let’s take a look at the code as a whole. Then we will break it down.
Let’s take a look at some code:
Now that’s a lot of code. No worries, we will break it down and go through it together so you can build it yourself and most importantly, you’ll understand what it does.
First we import all of our packages we need to create our form.
import React from 'react';import Form from 'react-bootstrap/Form';import Button from 'react-bootstrap/Button';import styled from 'styled-components';
You’ll notice that instead of importing both the Form and Button from ‘react-bootstrap’ , I imported them separately. This is so that the load on the browser is lessened and we are only making the user download what they actually need to get the component to render, nothing more. This makes for a smoother user experience.
Next, we create our stateless component with props. Then we destructure our props that we will need to make our form complete. These are all of the props we will need to pass into the form to display the information we want.
If your not familiar with the ES6 syntax here, this is just short hand for
props.cancel, props.errors, props.submit, props.elements, etc..
If you’d like to learn more about destructuring props or objects in general, check this out.
Form Functions
Next let’s create our event functions to handle the submit and cancel actions in the form. If you’ve ever created a form then you’ll understand this pretty quickly. The only difference is the submit() function which you would create in another component and pass to this function via props.
Remember, we aren’t trying to create a complete form here. We just want to create something we can grab anytime we need a scaffolding of a form..
Next we create our Error handling component. This handles and displays all of our errors in our form. You could actually take this component and put it in it’s own file. But since they tie pretty well together I have them in the same file.
First we pass in ‘props.errors’. Then we create a variable that will eventually render what the user sees.
Next we set up a conditional that asks if there are any errors passed in. If there are errors, then we create a JSX expression and map through the errors and show them in a list item. Remember, to add a key or you’ll get an error from React.
Lastly we wrap the JSX expression in an unordered list and give it a label, so the user knows what they are looking at it. If you’re wondering what React.Fragment is, it’s basically a way to wrap JSX without having to add a div, which adds extra nodes to the DOM. If you want to learn how to use it or curious about what it does. You can check that out here
Return JSX
Lastly we assemble everything and return it inside our return statement. We have to ensure we pass our props into our ErrorsDisplay component. We add our handleSubmit function to our Form so when we press the submit button, it submits the form. Also, we add our handleCancel function to our cancel button via the onClick action.
You’ll notice that we don’t have any ‘inputs’ in this form. You might be thinking we’ve missed something. Actually it’s in a JSX expression right below the form called ‘elements()’.
This is a render prop that will return all the inputs you want. This is what makes this form super flexible. Instead of changing the inputs you need for each form, you can just add them as you see fit. I have an example of how this looks further down.
You’re also probably wondering what <> & </> is. This is the same <React.Fragment> you saw earlier, just in its shorter syntax. Cool huh?
Implementation of our Form
Now we have a form that we can use anywhere we like. All that’s needed for implementation is to pass in our props.
You’ll notice our render prop where we are passing in all of our inputs. This example is just for a User sign in form so we only need email and password. However, if we wanted to create another form, we could add extra inputs, text area, etc.
Conclusion
So there you have it, a form you build yourself that handles everything you need. It’s super flexible and can be scaled to fit your needs. Hopefully this was helpful and you learned some stuff along the way.
