Apologies in advance for the abomination of a code you are about to see...
I am relatively new to React and programming in general, and I'm trying to create a MERN application with react-hooks-form to streamline the process. The component I have issues with is the editing portion. I was unable to figure out how to handle controlled inputs in hooks-form so I tried to circumvent the problem by using state to store the values in two different states, which I realize defeats the purpose of using hooks-forms.
Everything so far works fine with the exception of the dateOfBirth which is a required field. On submit, however I get a 400 error and says that dateOfBirth is required.
export default function EditMember(props) {
const [date, setDate] = useState(null);
const [member, setMember] = useState({
firstName: '',
lastName: '',
dateOfBirth: null,
gender: '',
address: '',
phoneNumber: ''
})
const onChangeDate = date => {
setDate(date)
}
useEffect(() => {
axios.get(`http://localhost:5000/members/${props.match.params.id}`)
.then(res => {
setMember({
firstName: res.data.firstName,
lastName: res.data.lastName,
dateOfBirth: Date.parse(res.data.dateOfBirth),
address: res.data.address,
phoneNumber: res.data.phoneNumber,
gender: res.data.gender
});
})
}, [])
useEffect(() => {
axios.get(`http://localhost:5000/members/${props.match.params.id}`)
.then(res => {
setDate(res.data.dateOfBirth);
})
}, []);
const { register, handleSubmit } = useForm();
const onSubmitData = data => {
const updatedMember = {
firstName: data.firstName,
lastName: data.lastName,
dateOfBirth: date,
address: data.address,
phoneNumber: data.phoneNumber,
gender: data.gender,
}
axios.post(`http://localhost:5000/members/update/${props.match.params.id}`, updatedMember)
.then(res => console.log(res.data))
}
return (
<form onSubmit={handleSubmit(onSubmitData)}>
<div>
<input
type="text"
name="firstName"
defaultValue={member.firstName}
placeholder="First name"
ref={register}
/>
<input
type="text"
name="lastName"
defaultValue={member.lastName}
placeholder="Last name"
ref={register}
/>
<span>Male</span>
<input
type="radio"
value="Male"
name="gender"
ref={register}
/>
<span>Female</span>
<input
type="radio"
value="Female"
name="gender"
ref={register}
/>
<input
type="text"
name="address"
placeholder="Address"
ref={register}
defaultValue={member.address}
<input
type="text"
name="phoneNumber"
placeholder="Phone Number"
ref={register}
defaultValue={member.phoneNumber}
/>
<DatePicker
selected = {member.dateOfBirth}
onChange = {onChangeDate}
placeholderText="Select date"
/>
<button type="submit">Edit Log</button>
</form>
)
}
Any reason as to why this occurs? Besides that, any insight into how I can refactor the code would be helpful.
In order to use react-datepicker with react-hook-form you need to utilize react-hook-form's Controller component. Reference here: Integrating Controlled Inputs.
The following component declaration illustrates wrapping a react-datepicker DatePicker component in a react-hook-form Controller component. It is registered with react-hook-form using control={control} and then renders the DatePicker in the Controller components render prop.
const { register, handleSubmit, control, setValue } = useForm();
//...
<Controller
name="dateOfBirth"
control={control}
defaultValue={date}
render={() => (
<DatePicker
selected={date}
placeholderText="Select date"
onChange={handleChange}
/>
)}
/>
The DatePicker still needs to control its value using handleChange and a date state, but we can use this same handler to update the value of the registered input for react-hook-form using setValue().
const handleChange = (dateChange) => {
setValue("dateOfBirth", dateChange, {
shouldDirty: true
});
setDate(dateChange);
};
Your full component (without API calls) might look like the following. onSubmitData() is called by react-hook-form's handleSubmit() and here logs the output of the form, including the updated DatePicker value.
Here's a working sandbox.
import React from "react";
import "./styles.css";
import { useForm, Controller } from "react-hook-form";
import DatePicker from "react-datepicker";
export default function App() {
return (
<div className="App">
<EditMember />
</div>
);
}
function EditMember() {
const { register, handleSubmit, control, setValue } = useForm();
const [date, setDate] = React.useState(new Date(Date.now()));
const onSubmitData = (data) => {
console.log(data);
// axis.post(
// `http://localhost:5000/members/update/${props.match.params.id}`,
// data).then(res => console.log(res.data))
}
const handleChange = (dateChange) => {
setValue("dateOfBirth", dateChange, {
shouldDirty: true
});
setDate(dateChange);
};
return (
<div>
<form onSubmit={handleSubmit(onSubmitData)}>
<input
type="text"
name="firstName"
placeholder="First name"
ref={register}
/>
<input
type="text"
name="lastName"
placeholder="Last name"
ref={register}
/>
<span>Male</span>
<input type="radio" value="Male" name="gender" ref={register} />
<span>Female</span>
<input type="radio" value="Female" name="gender" ref={register} />
<input
type="text"
name="address"
placeholder="Address"
ref={register}
/>
<input
type="text"
name="phoneNumber"
placeholder="Phone Number"
ref={register}
/>
<Controller
name="dateOfBirth"
control={control}
defaultValue={date}
render={() => (
<DatePicker
selected={date}
placeholderText="Select date"
onChange={handleChange}
/>
)}
/>
<button type="submit">Edit Log</button>
</form>
</div>
);
}
Output
//Output
Object {firstName: "First", lastName: "Last", gender: "Male", address: "Addy", phoneNumber: "fon"…}
firstName: "First"
lastName: "Last"
gender: "Male"
address: "Addy"
phoneNumber: "fon"
dateOfBirth: Wed Aug 19 2020 17:20:12 GMT+0100 (BST)