Forms are the most used HTML element, and as a result, they are a part of web development that we have to deal with every day as developers, and form handling comes in different ways depending on choice. In React, there are two ways to handle forms (at least that I know of) and they are both unique in their ways; Controlled and Uncontrolled. We are going to be discussing both of the ways and with examples to help you cement your knowledge about this topic. Now let's get into it.
Controlled Forms:
In React, understanding what state is is an integral knowledge that needs to be learned. The state is used to hold value or information in react. It is the present value of an object in a react component, and it is updatable, meaning the value of that object can be changed. As regards form data, being able to update the value of the data through the component is what makes a form controlled.
const [name, setName] = useState('John')
There is always an initial state which holds a value. In the above code, name = John and name is the initial state holding the value John, and to update the value, we will run this code in the form element.
<form>
<label for="name">Enter your name</label>
<input type="text" name="name" value={name} onChange={(e)=>setName(e.target.value)}/>
</form>
In the code above the onChange event handler is used to update the state of the component holding the form.
I'll say this type of form handling is the safer of the 2 ways to handle form data. In a nutshell, controlled forms are updated by the state in the component.
Let's see with a practical example how it works.
import React, {useState, useRef} from 'react'
import './Form.css'
const Form = () => {
const [firstName, setFirstName] = useState('')
const [lastName, setLastName] = useState('')
const [address, setAddress] = useState('')
const [age, setAge] = useState('')
return (
<div>
<form >
<div className='details'>
<label>First Name</label>
<input
type='text'
htmlFor='first name'
value={firstName}
onChange= {(e)=>setFirstName(console.log(e.target.value))}
/>
</div>
<div className='details'>
<label>Last Name</label>
<input
type='text'
htmlFor='last name'
value={lastName}
onChange={(e)=>setLastName(console.log(e.target.value))}
/>
</div>
<div className='details'>
<label>Address</label>
<input
type='address'
htmlFor='address'
value={address}
onChange={(e)=>setAddress(console.log(e.target.value))}
/>
</div>
<div className='details'>
<label>Age</label>
<input
type='number'
htmlFor='age'
value={age}
onChange={(e)=>setAge(console.log(e.target.value))}
/>
</div>
<button>Submit</button>
</form>
</div>
)
}
export default Form
In this example, the initial state values are stored in the firstName, lastName, address and age state value, and when you want to update the state, you use the onChange event handler to update them to the user's inputs. The new states will be updated using the setFirstName, setLastName, setAddress and setAge value updates. You can run the code on your computer and you would see the output in the console.
Uncontrolled Forms:
Here, form data is not updated by the state in the component, rather it is updated by the DOM. In most cases, when using an uncontrolled form, you use useRef to store and output the data.
const valueRef = useRef()
<div className='details'>
<label>Enter a value</label>
<input
type='text'
htmlFor='our value'
ref={valueRef}
/>
</div>
The useRef hook is used to hold values in this uncontrolled form example. In this above code, valueRef is assigned to update the value of the user's input.
Let's see how this works with an example.
import React, {useState, useRef} from 'react'
import './Form.css'
const Form = () => {
const firstNameRef = useRef()
const lastNameRef = useRef()
const addressRef = useRef()
const ageRef = useRef()
const submitBtn = () => {
console.log(firstNameRef.current.value);
console.log(lastNameRef.current.value);
console.log(addressRef.current.value);
console.log(ageRef.current.value);
}
return (
<div>
<form onClick={submitBtn}>
<div className='details'>
<label>First Name</label>
<input
type='text'
htmlFor='first name'
ref={firstNameRef}
/>
</div>
<div className='details'>
<label>Last Name</label>
<input
type='text'
htmlFor='last name'
ref={lastNameRef}
/>
</div>
<div className='details'>
<label>Address</label>
<input
type='address'
htmlFor='address'
ref={addressRef}
/>
</div>
<div className='details'>
<label>Age</label>
<input
type='number'
htmlFor='age'
ref={ageRef}
/>
</div>
<button>Submit</button>
</form>
</div>
)
}
export default Form
Here, the useRef variables of firstNameRef, lastNameRef, addressRef, and ageRef were used to hold and store up the user's inputs. You can run the code on your computer and see how it outputs on the console.
If you aren't working on a large project, I would advise you to use the uncontrolled form type, but if you are working on a fairly large project that uses form validation, then I think the controlled form would be suitable. At the end of the day, the choice is yours to choose, because there is no bad approach from these two examples.
I hope this article is clear and helpful enough and I hope you had a great read. Please LIKE and refer someone to read as well. Also, don’t forget to follow me.
Have a great weekend my friends.
Top comments (0)