Create a basic form in React using react-final-form
Forms are difficult in React.
In this lesson we are going to see an example of using react-final-form to create a basic form using Form and Field components. react-final-form is a lightweight wrapper around final-form library (only 3kB gzipped!) and is one of the best ways to create a form in React as of today.
Instructor: [00:00] First, import form and field from React Final Form. Next, create the form. The form has an onSubmit property, which by default we're going to put it as an empty function.
[00:13] We'll get back to it later. It also has a render prop. A render prop is a function which receives an object as an argument, which for instance has a handleSubmit field and it returns a JSX.
[00:28] In our case, it's going to return a HTML form. Inside of this form, we're going to have a label for first name. We also are going to have a field component. Let me format that, and let's set props to our field component.
[00:45] A field has a name. In this case, it's going to be the first name. We're going to put exactly the same for the label. We also need to specify the component type. In this case it's going to be an input, but could be for instance, I select this input is of type text, and we're going to have a placeholder. In this case, it's going to be the first name.
[01:06] Then, we can see the result over here. To create a field for the second name, let's wrap this component inside of our div. We're going to copy and paste it down below.
[01:16] Instead of first, it's going to be the second name should be lower case and this one as well. There you go. We have second name as well. We can type in those inputs, but we cannot see the results yet.
[01:31] To fix it, let's introduce a very lose property. We're going to have a prior element which is going to describe a JSON.stringify values zero to, and there we go.
[01:47] After we fix it, I'm going to put in some text "Hello world," and you can see the values of the form updated as I type them. Every form needs a submit button. After clicking the submit button, it's going to trigger the handleSubmit function, which right now is an empty function.
[02:10] First, we need to comment this handleSubmit function to our form, so whenever the form is submitted, the handleSubmit function gets triggered. We're going to create a onSubmit function over here, which is going to take our values of the form and is going to allow them in a new window.
[02:28] JSON.stringify values zero to. I'm going to attach this onSubmit function over here. After I put it my first name and my second name, and I click submit, we see that the form is submitted with the values I've put into the form.
[02:48] It would be nice to be able to reset those values inside of the form. To do that, destructure the form argument from the render prop, and we're going to create a button of type button, which is going to be a reset button, and we're going to attach the onCreate the form.reset function.
[03:09] There you go. I can put it my first and second name here again. After I click the reset button, the form style gets reset, but the submit button doesn't works. If I put in "Hello Egghead" and click submit, we can see that the form has been just submitted.