OneCompiler

Warning: A component is changing an uncontrolled input of type datetime-local to be controlled.

Following is my code snippet

const OneDateField = (props) => {
    const classes = useStyles();
    return (
        <form className={classes.container} noValidate>
            <TextField id="datetime-local-from" label="From" type="datetime-local" InputLabelProps={{ shrink: true, }} className={classes.root}
                value={props.value ? getDateTimeFieldFromDateObj(props.value) : null}
                onChange={e => props.onChange(getDateObjFromDateTimeField(e.target.value))}
            />
        </form>
    )
};

This is throwing following warning

Warning: A component is changing an uncontrolled input of type datetime-local to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components
    in input (created by ForwardRef(InputBase))
    in div (created by ForwardRef(InputBase))
    in ForwardRef(InputBase) (created by WithStyles(ForwardRef(InputBase)))
    in WithStyles(ForwardRef(InputBase)) (created by ForwardRef(Input))
    in ForwardRef(Input) (created by WithStyles(ForwardRef(Input)))
    in WithStyles(ForwardRef(Input)) (created by ForwardRef(TextField))
    in div (created by ForwardRef(FormControl))
    in ForwardRef(FormControl) (created by WithStyles(ForwardRef(FormControl)))
    in WithStyles(ForwardRef(FormControl)) (created by ForwardRef(TextField))
    in ForwardRef(TextField) (created by WithStyles(ForwardRef(TextField)))
    in WithStyles(ForwardRef(TextField)) (created by OneDateField)
    in form (created by OneDateField)
    in OneDateField (created by ChallengesCreate)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by ChallengesCreate)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by ChallengesCreate)
    in main (created by ForwardRef(Container))
    in ForwardRef(Container) (created by WithStyles(ForwardRef(Container)))
    in WithStyles(ForwardRef(Container)) (created by ChallengesCreate)
    in div (created by ChallengesCreate)
    in ChallengesCreate (created by AppWithProvider)
    in ThemeProvider (created by AppWithProvider)
    in AppWithProvider (created by MyApp)
    in Provider (created by MyApp)
    in MyApp
    in ErrorBoundary (created by ReactDevOverlay)
    in ReactDevOverlay (created by Container)
    in Container (created by AppContainer)
    in AppContainer
    in Root

No answers yet!

3 years ago by