Failed prop type: The prop `children` is marked as required in `InputAdornment`, but its value is `undefined`

Question

I get this warning when I run my React.js front-end:

index.js:1446 Warning: Failed prop type: The prop `children` is marked as required in `InputAdornment`, but its value is `undefined`.
    in InputAdornment (created by WithStyles(InputAdornment))
    in WithStyles(InputAdornment) (at TopControls.js:101)
    in div (created by InputBase)
    in InputBase (created by Context.Consumer)
    in WithFormControlContext(InputBase) (created by WithStyles(WithFormControlContext(InputBase)))
    in WithStyles(WithFormControlContext(InputBase)) (created by Input)
    in Input (created by WithStyles(Input))
    in WithStyles(Input) (created by TextField)
    in div (created by FormControl)
    in FormControl (created by WithStyles(FormControl))
    in WithStyles(FormControl) (created by TextField)
    in TextField (at TopControls.js:91)
    in div (created by Grid)
    in Grid (created by WithStyles(Grid))
    in WithStyles(Grid) (at TopControls.js:90)
    in div (created by Grid)
    in Grid (created by WithStyles(Grid))
    in WithStyles(Grid) (at TopControls.js:89)
    in div (at TopControls.js:22)
    in TopControls (at BatchFlights.js:147)
    in BatchFlights (created by WithStyles(BatchFlights))
    in WithStyles(BatchFlights) (at App.js:23)

The lines 10-102 in TopControls.js contain this code:

    InputProps={{
       startAdornment: <InputAdornment position="start"></InputAdornment>,
    }}

Could someone please explain what is wrong and how can I avoid this warning?

Answer 1

When you write <InputAdornment position="start"></InputAdornment>, you do not pass any children to InputAdornment (for example, I could write <InputAdornment position="start"><MyComponent /></InputAdornment> if I wanted to pass MyComponent in InputAdornment's children). At the same time, props children is specified as required in InputAdornment's PropTypes. There are two ways to remove a warning:

1. If you do not want to ALWAYS pass children prop to InputAdornement, you can remove required specifier from its PropTypes.
2. If you DO want to always pass children prop to InputAdornement, or it isn't your component, you should pass children to it as in the example above. Then PropType's requirement will be met.