This content originally appeared on DEV Community and was authored by WebDevZTH
There are numerous ways to make a form input controlled from not controlled. The internet is mostly just a collection of forms ^_^ and one solution to make interacting with form inputs is to use the following approach...
Suppose we have a form with a single input field
<form>
<input type='text' id='username'/>
<button type='submit'>Send</button>
</form>
In the above example we are sending the field 'username' to our backend or to some end-point on submitting this form. To do this we must have two things a 'onSubmit' event and a way to keep track of the data entered into the input field of the form, one approach is...
const [value, setValue] = useState('')
<form onSubmit={handleFormSubmit}>
<input value={value} onChange={({target}) => setValue(target.value)} type='text' id='username'/>
<button type='submit'>Send</button>
</form>
The above snippet is making use of the 'useState' hook to make this component stateful. We are then passing the value and onChange event handler to the input field to keep track and store the value enetered into 'username'
This approach works fine and good but we will have to define multiple 'onChange' event handlers if our form gets more input fields and as the complexity grows the components code will start to look messy.
One thing we can use here is custom hooks, that is we create a function that utilises the react-hooks and customise its behaviour to suit our needs. One approach to do this is like so...
import {useState} from 'react'
export const useField = (type) => {
const [value, setValue] = useState('')
const onChange = (event) => {
setValue(event.target.value)
}
const reset = () => {
setValue('')
}
return {
type,
value,
onChange,
reset
}
}
Now we can import this custom hook into any component where we want to use input fields, like so...
import useField from '..file its being exported from'
Then we can use it in our react component, like so..
const {reset, ...username} = useField('text')
<form onSubmit={handleFormSubmit}>
<input {...username} type='text' id='username'/>
<button type='submit'>Send</button>
</form>
Now one way to implement the handleFormSubmit is like so...
const handleFormSubmit = (event) => {
event.preventDefault()
let userObject = {
username: username.value
}
// send data to backend
reset()
}
We can call the reset method after successfully sending form-data to the backend and the input field is reset to an empty string.
Using this approach we make the code much cleaner and dont need to use multiple useState hooks within our components which clutters the code.
Try this in your next form in React! ^_^
This content originally appeared on DEV Community and was authored by WebDevZTH
WebDevZTH | Sciencx (2021-08-10T03:56:47+00:00) Creating a custom hook in React to control form input. Retrieved from https://www.scien.cx/2021/08/10/creating-a-custom-hook-in-react-to-control-form-input/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.