0
199
ViewsCannot change state of one item across multiple inputs in a form component
I have a form that takes a couple of inputs. To store their states I created an object which works fine for all inputs except the date one.
// Input handler
const [values, setValues] = React.useState({
applicant: '',
position: '',
startSalary: '',
date: null,
months: 0,
increase: 0,
interval: "",
method: "",
});
const handleChange = (prop) => (event) => {
setValues({ ...values, [prop]: event.target.value });
console.log(values)
};
..
{/* Months Period */}
<div className="flex">
<div className="input-wrapper flex justify-between w-full items-center">
<FormControl sx={{ width: '95%', marginRight: '20px' }}>
<InputLabel htmlFor="outlined-adornment-amount">Months</InputLabel>
<OutlinedInput
id="outlined-adornment-amount"
value={values.months}
onChange={handleChange('months')}
startAdornment={<InputAdornment position="start">n</InputAdornment>}
label="Months"
type="number"
/>
</FormControl>
</div>
</div>
{/* Date Picker */}
<div className="input-wrapper flex justify-between items-center">
<LocalizationProvider dateAdapter={AdapterMoment}>
<DatePicker
label="Start Date"
value={values.date}
onChange={handleChange('date')}
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>
</div>
..
When I change the date on the client side it returns 
However, this works isolated for the datepicker:
...
const [value, setValue] = React.useState(null);
<div className="input-wrapper flex justify-between items-center">
<LocalizationProvider dateAdapter={AdapterMoment}>
<DatePicker
label="Start Date"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>
</div>
...
3 answers
Answer question0
By seeing above code, seems like DatePicker isn't returning you an event object.
Simply check, by doing a console.log in your handleChange method. Also,you can add if checks to manage such cases.
const handleChange = (prop) => (event) => {
console.log(event);
if(prop === 'date') {
setValues({ ...values, [prop]: event});
} else {
setValues({ ...values, [prop]: event.target.value });
}
console.log(values)
};
PS: Answering to your comment,
This is happening because DatePicker is doing the hard work to extract value from event object.
It is overriding the default onChange event if input
This is demo of how it might be happening:
const DatePicker = (props) => {
const {onChange = ()=> {}} = props;
const handleChange = (event)=> {
const value = event.target.value;
onChange(value); // this value you are receiving.
}
return <input type="date" onChange={handleChange} />
}
0
DatePicker returns date not an event. You can handle it like this
const handleChange = (prop) => (event) => {
if(prop === 'date') {
return setValues({ ...values, [prop]: event });
}
setValues({ ...values, [prop]: event.target.value });
};
0
DatePicker will provide you the array of dates so you can store the dates using the following method:-
const handleChange = (prop) => (event) => {
if (prop === date){
setValues({...values, [prop]: moment(event[0])})
}else {
setValues({ ...values, [prop]: event.target.value });
}
console.log(values)
};
Moment is the npm package used for changing the date from iso string to normal form and you can also format the dates using this package.