How to get e.target.name in react-datetime picker? - reactjs

Question

I'm creating a form that can get time value of time picker.
But due to the e is already the Moment, I cant get the input name in handleChange.
Is there a way to get it?
Component:
<DateTimeRangePicker
selected={time}
onChange={handleChange}
type='timepicker'
readOnly={false}
texts={{
name: 'time',
placeholder: 'Enter your time out'
}}
timeFormat='HH:MM:SS'
/>
the texts?.name will be a props and will be inside of innerProps of DatetimepickerProps
CustomForm handleChange
const [values, setValues] = useState(initialState)
const [data, setData] = useState(initialState)
const handleChange = useCallback(
(e: any) => {
let result: any
setValues({ ...values, [e.target.name]: e })
if (e._isValid === true) {
result = {
value: e._d,
status: true
}
} else {
result = {
value: e._d,
status: false
}
}
setData({ ...data, [e.target.name]: result })
},
[data]
)
It has to be e.target.name, since the CustomForm onSubmit will get the other input component throught its e.target.name

Answer 1

For the component DateTimeRangePicker from react-datetime-picker
What you receive from the picker onChange, is not the typical event that you would get from a Jsx element; rather it is the time value of the picker
You can see it in the source code via this link
A solution would be to wrap your handleChange and use a constant to define the name of your property as follow
const TIME_NAME = "time";
const YourComponent = () => {
const [values, setValues] = useState(initialState)
const [data, setData] = useState(initialState)
const handleChange = useCallback(
(e: any) => {
let result: any
setValues({ ...values, [e.target.name]: e.target.value })
if (e._isValid === true) {
result = {
value: e.target.value,
status: true
}
} else {
result = {
value: e.target.value,
status: false
}
}
setData({ ...data, [e.target.name]: result })
},
[data]
);
const handleDateTimeRangePickerChange = (_value) => {
handleChange({target: {name: TIME_NAME, value: _value }});
}
return <DateTimeRangePicker
name={TIME_NAME}
selected={time}
onChange={handleDateTimeRangePickerChange}
type='timepicker'
readOnly={false}
texts={{
name: 'time',
placeholder: 'Enter your time out'
}}
timeFormat='HH:MM:SS'
/>
}