Creating forms using react.
Taking user input using a form is a fundamental of many apps and websites. However, they function pretty differently in React. Let's jump in to it and explore the two ways to create forms in React.
Uncontrolled Forms
The first way to create a form using react is by creating an 'uncontrolled' form, this essentially means that React does not control the form element and that it will manage its internal values independently. Similar to your typical plain html form.
A typical form input in HTML would look like this:
<input type="text" value="name" />
However, due the way React works, if we set a value on an input this will render as read only and the user will not be able to edit the input.
To use forms in this way, we need to use a 'ref' attribute. We will use the ref attribute to set the user input to a variable we define. Very similar to how we do with the normal 'value' attribute in a form.
Below we have an example of a uncontrolled form that asks a user for their name.