I'm using a building a MERN Stack application ("react": "^16.14.0") that has a form using DatePicker ("react-datepicker": "^4.2.1") to set a date range. Currently, the value for the date is being selected, but the name is coming through undefined. This is throwing a TypeError and crashing the application when a date is selected. How do I set the e.target.name to startDate and endDate?
TyperError
react-dom.development.js:327
Uncaught TypeError: Cannot read properties of undefined (reading 'name')
at onChange (index.js:55)
formData
const [formData, setFormData] = useState({
startDate: '',
endDate: '',
})
const {
startDate,
endDate,
} = formData
DatePicker
<DatePicker
isClearable
filterDate={(d) => {return new Date() > d}}
placeholderText="Select Start Date"
dateFormat="MMMM yyyy"
selected={startDate}
selectsStart
startDate={startDate}
endDate={endDate}
onChange={(date) => onChange({ name: startDate, value: date })}
/>
onChange Function
const onChange = (e) => {
console.log(e)
setFormData({ ...formData, [e.target.name]: e.target.value })
}
Console.log()
name: undefined
value: Tue Aug 03 2021 00:00:00 GMT-0400 (Eastern Daylight Time)
Generally we get field name using event.target.name.
But while we are using any component library that time it's depend on library how library developer gave way to get field name. so you have to check library document.
Surprise you have one more way.
Just need to pass field name in onChange function
<DatePicker value={dateValue} onChange={(date) => onChange(name,date)} />
onChange=(name, date)=>{ console.log(name,date) }
Reason why that happens is that you onChange is not receiving any event, thus the e.target is undefined. if you take a look here:
// Add the name explicitly as a string, cause you're trying to update a key by its name
onChange={(date) => onChange({ name: "startDate", value: date })}
The onChange is receiving and object with the name and value keys. so the onChange function should be like this:
const onChange = (item) => {
console.log(item)
// should print something like { name: "startDate", value: "the date object" }
setFormData({ ...formData, [item.name]: item.value })
}