-
-
Notifications
You must be signed in to change notification settings - Fork 31.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[DatePicker] Warning in console related to useState hook in examples #24169
Comments
Yeah. We are sending second argument in onChange callback. Moreover there is a note about this warning on the docs site. |
Ah, I see, I missed that line in docs. Sorry for the noise |
Edit: I found it here, if somebody got stuck here as well:
|
@dmtrKovalenko Sometime, we provide a Should mitigate all the demos away from the direct association pattern? const [selectedDate, handleDateChange] = useState(new Date());
<DatePicker value={selectedDate} onChange={handleDateChange} /> It would allow adding a reason argument without having to worry about people that copy & paste the demos (which a lot do). It would also avoid people falling into this trap. Alternatively, we could wait for the need to come. |
I think it is already migrated. But definitely yes!
|
This comment has been minimized.
This comment has been minimized.
Is this still an issue? I can pick it up |
@michael-d-t Yes, it's definitely still an issue. At this point, I believe there is only two demos to migrate: diff --git a/docs/src/pages/components/date-picker/CustomDay.tsx b/docs/src/pages/components/date-picker/CustomDay.tsx
index f7bae2de4f..28d3b1e6bf 100644
--- a/docs/src/pages/components/date-picker/CustomDay.tsx
+++ b/docs/src/pages/components/date-picker/CustomDay.tsx
@@ -32,19 +32,19 @@ const useStyles = makeStyles((theme) => ({
export default function CustomDay() {
const classes = useStyles();
- const [selectedDate, handleDateChange] = React.useState<Date | null>(new Date());
+ const [value, setValue] = React.useState<Date | null>(new Date());
const renderWeekPickerDay = (
date: Date,
_selectedDates: Date[],
PickersDayComponentProps: PickersDayProps<Date>,
) => {
- if (!selectedDate) {
+ if (!value) {
return <PickersDay {...PickersDayComponentProps} />;
}
- const start = startOfWeek(selectedDate);
- const end = endOfWeek(selectedDate);
+ const start = startOfWeek(value);
+ const end = endOfWeek(value);
const dayIsBetween = isWithinInterval(date, { start, end });
const isFirstDay = isSameDay(date, start);
@@ -67,8 +67,10 @@ export default function CustomDay() {
<LocalizaitonProvider dateAdapter={AdapterDateFns}>
<DatePicker
label="Week picker"
- value={selectedDate}
- onChange={handleDateChange}
+ value={value}
+ onChange={(newValue) => {
+ setValue(newValue);
+ }}
renderDay={renderWeekPickerDay as any}
renderInput={(params) => <TextField {...params} variant="standard" />}
inputFormat="'Week of' MMM d"
diff --git a/docs/src/pages/components/date-time-picker/BasicDateTimePicker.tsx b/docs/src/pages/components/date-time-picker/BasicDateTimePicker.tsx
index 6e8345646a..140ae9f8e5 100644
--- a/docs/src/pages/components/date-time-picker/BasicDateTimePicker.tsx
+++ b/docs/src/pages/components/date-time-picker/BasicDateTimePicker.tsx
@@ -5,15 +5,17 @@ import LocalizationProvider from '@material-ui/lab/LocalizationProvider';
import DateTimePicker from '@material-ui/lab/DateTimePicker';
export default function BasicDateTimePicker() {
- const [selectedDate, handleDateChange] = React.useState<Date | null>(new Date());
+ const [value, setValue] = React.useState<Date | null>(new Date());
return (
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DateTimePicker
renderInput={(props) => <TextField {...props} />}
label="DateTimePicker"
- value={selectedDate}
- onChange={handleDateChange}
+ value={value}
+ onChange={(newValue) => {
+ setValue(newValue);
+ }}
/>
</LocalizationProvider>
); |
I can take this one |
Hello,
I was playing with your lib and found out the following.
I see a warning in console (dev mode) when using handlers of useState directly in onChange prop like in the usage example
I know there is a way to avoid this by using:
Environment
Steps to reproduce
Just checkout examples in the documentation
see Live Example section
Expected behavior
I expect to not see any warning or to see correct examples in documentation
Actual behavior
i have this warning in the console when changing date of KeyboardDatePicker
and this one when using DatePicker
index.js:1375 Warning: State updates from the useState() and useReducer() Hooks don't support the second callback argument. To execute a side effect after rendering, declare it in the component body with useEffect().
Live example
https://codesandbox.io/s/material-ui-pickers-usage-demo-tm9bi
open console from dev tool (chrome)
Try to edit the date of KeyboardDatePicker,
I can provide a PR for updating examples with (val) => handleDateChange(val) fix if you accept
The text was updated successfully, but these errors were encountered: