I have a series of Input components and want to use only one onChange function.
Within a Class component I know I am able to do something like the following to adapt to the different states:
inputChange(input) {
this.setState({
[input.name]: input,
});
}
How, within a functional component, can I update state with only one onChange function?
Example of a component:
function Form(){
const [selectedClient, updateSelectedClient] = useState(null);
const [selectedLocation, updateSelectedLocation] = useState(null);
return(
<input
value={selectedClient}
id="selectedClient"
name="selectedClient"
onChange={???}
/>
<input
value={selectedLocation}
id="selectedLocation"
name="selectedLocation"
onChange={???}
/>
);
}
Thank you for the time!
Since this is one form I would combine the states into one, initialising it with an object, and then when the onChange handler is called update the property identified by the input id with the value.
useEffect is used here to log the result of updating the state.
const { useEffect, useState } = React;
function Example() {
const [form, setForm] = useState({});
useEffect(() => {
console.log(form);
}, [form])
function handleChange(e) {
// Grab the id and value from the input
const { id, value } = e.target;
// Create a new object by spreading out the current form
// state, and setting the state property to the new value
setForm({ ...form, [id]: value });
}
return (
<div>
Client: <input
value={form.client}
id="client"
name="client"
onChange={handleChange}
/>
Location: <input
value={form.location}
id="location"
name="location"
onChange={handleChange}
/>
</div>
);
}
// Render it
ReactDOM.render(
<Example />,
document.getElementById("react")
);input { display: block; }<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>use the same method you used in the class, the difference is you combine the client and location into one object which will represent the state, and you take advantage of the ids:
const {useState} = React;
function Form(){
const [selectedClientOrLocation,setSelectedClientOrLocation] = useState({
selectedClient:"",
selectedLocation:""
})
const handleChange = (e) =>{
setSelectedClientOrLocation({...selectedClientOrLocation,[e.target.id]:e.target.value})
}
return(
<form>
<label htmlFor="selectedClient">
Client
<input
value={selectedClientOrLocation.selectedClient}
id="selectedClient"
name="selectedClient"
onChange={handleChange}
/>
</label>
<br/>
<label htmlFor="selectedLocation">
Location
<input
value={selectedClientOrLocation.selectedLocation}
id="selectedLocation"
name="selectedLocation"
onChange={handleChange}
/>
</label>
</form>
)
}
ReactDOM.render(<Form/>,document.getElementById('root'))<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>