ReactJS | Consolidate Form onChange Handlers - reactjs

Question

So check out this one for more details on original problem: Reactjs Object State Change Events in Form
Now I'd really like to consolidate my handlers, I've ended up with a bunch of inline onChange handlers, which if I want to extract and re-use my code is not really acheivable unless I can consolidate them into a single handler. How would one go about consolidating these into a single function which can handle everything?
<Container>
<h2>Create New Facility</h2>
<p>facility name: {Facility.Name}</p>
<br></br>
<p>address: {Facility.AddressLineOne}</p>
<Form onSubmit={handleSubmit}>
<Row className="mb-3">
<Col>
<Form.Label>Location Name</Form.Label>
<Form.Control
type="text"
placeholder="Location's Name"
onChange={(e) =>
setFacility((oldValue) => ({
...oldValue,
Name: e.target.value,
}))
}
/>
</Col>
<Col>
<Form.Label>Latitude</Form.Label>
<Form.Control
type="float"
placeholder="Enter Latitude"
onChange={(e) =>
setFacility((oldValue) => ({
...oldValue,
Latitude: e.target.value,
}))
}
/>
</Col>
<Col>
<Form.Label>Longitude</Form.Label>
<Form.Control
type="float"
placeholder="Enter Longitude"
onChange={(e) =>
setFacility((oldValue) => ({
...oldValue,
Longitude: e.target.value,
}))
}
/>
</Col>
</Row>
<Row className="mb-3">
<Col>
<Form.Label>Description</Form.Label>
<Form.Control
as="textarea"
rows={3}
placeholder="Enter Description"
onChange={(e) =>
setFacility((oldValue) => ({
...oldValue,
Description: e.target.value,
}))
}
/>
</Col>
</Row>
<Form.Group className="mb-3" controlId="formGridAddress1">
<Form.Label>Address</Form.Label>
<Form.Control
placeholder="1234 Main St"
onChange={(e) =>
setFacility((oldValue) => ({
...oldValue,
AddressLineOne: e.target.value,
}))
}
/>
</Form.Group>
<Form.Group className="mb-3" controlId="formGridAddress2">
<Form.Label>Address 2</Form.Label>
<Form.Control
placeholder="Apartment, studio, or floor"
onChange={(e) =>
setFacility((oldValue) => ({
...oldValue,
AddressLineTwo: e.target.value,
}))
}
/>
</Form.Group>
<Row className="mb-3">
<Form.Group as={Col} controlId="formGridCity">
<Form.Label>City</Form.Label>
<Form.Control
placeholder="Miami Beach"
onChange={(e) =>
setFacility((oldValue) => ({
...oldValue,
City: e.target.value,
}))
}
/>
</Form.Group>
<Form.Group as={Col} controlId="formGridState">
<Form.Label>State</Form.Label>
<Form.Control
placeholder="FL"
onChange={(e) =>
setFacility((oldValue) => ({
...oldValue,
State: e.target.value,
}))
}
/>
</Form.Group>
<Form.Group as={Col} controlId="formGridZip">
<Form.Label>Zip</Form.Label>
<Form.Control
placeholder="33141"
onChange={(e) =>
setFacility((oldValue) => ({
...oldValue,
ZipCode: e.target.value,
}))
}
/>
</Form.Group>
</Row>
<Button variant="primary" type="submit">
Submit
</Button>
</Form>
</Container>

Answer 1

Well, you can implement the hook that manages the form state and allows you to register new fields:
function useForm({ defaultValues = {} }) {
const [ values, setValues ] = useState(defaultValues);
const field = (name) => {
const onChange = (e) => {
setValues((current) => ({ ...current, [name]: e.target.value }));
};
const value = values[name];
return { name, onChange, value };
};
return { field, values };
}
Then apply it to the form
function FacilityForm() {
const { values, field } = useForm({});
const handleSubmit = () => {
console.log(values);
};
return (
<Form onSubmit={handleSubmit}>
<Form.Label>Location Name</Form.Label>
<Form.Control
{...field('location')}
type="text"
placeholder="Location's Name"
/>
<Form.Label>Latitude</Form.Label>
<Form.Control
{...field('latitude')}
type="text"
placeholder="Latitude"
/>
</Form>
);
}
This is a very simple implementation that may lack the features you might want to have (e.g validation, nested keys, etc.). I would recommend you consider the existing libraries for that. For example, react-hook-forms is very good for such purposes