Why does React tell me that my Material Select input doesn't have a name?

Question

I'm creating a new form with React and one of the inputs is a Material UI input. The form works great, but the console shows a Missing name at warning when the form loads even though I've put a name both on the select input and the hidden input that Material UI creates.

<FormControl variant="filled" className={classes.formControl} style={{ width: '100%' }}>
  <InputLabel id="dog-breed-label">Dog Breed</InputLabel>
  <Select
    label="Dog Breed"
    labelId="dog-breed-label"
    name="dogBreed"
    value={defaultDog.dogBreed}
    onChange={event => setBankAccount({ ...dogBreed, dogBreed: event.target.value })}
    inputRef={register({ required: true })}
    variant="filled"
    style={{ width: '100%' }}
    inputProps={{ name: 'dogBreedInput' }}
    inputRef={register({ required: true })}
  >
    <MenuItem value="CHIHUAHUA">Chihuahua</MenuItem>
    <MenuItem value="LABRADOR">Labrador Retriever</MenuItem>
  </Select>
</FormControl>

Warning Message (screenshot):

Missing name at {node: input, value: undefined, focus: ƒ}focus: ƒ focus()node: inputvalue: undefined__proto__: Object 
    in SelectInput (created by InputBase)
    in InputBase (created by WithStyles(ForwardRef(InputBase)))
    in WithStyles(ForwardRef(InputBase)) (created by FilledInput)
    in FilledInput (created by WithStyles(ForwardRef(FilledInput)))
    in WithStyles(ForwardRef(FilledInput)) (created by Select)
    in Select (created by WithStyles(ForwardRef(Select)))
    in WithStyles(ForwardRef(Select)) (at modal.js:95)
    in Modal (at bankInformation/index.js:146)
    in Anonymous (at demographics/index.js:199)
    in Anonymous (at routes/index.js:16)

What do I need to add to avoid seeing this warning in the console?

Please provide a CodeSandbox that reproduces this issue. I do not see the warning here: codesandbox.io/s/dog-breed-select-fibt5. — Ryan Cogswell
– Ryan Cogswell, Commented Nov 13, 2019 at 14:31
Apologies for the delayed reply. I realized it actually happens in conjunction with react-hook-form. Here's a CodeSandbox — tyler
– tyler, Commented Nov 27, 2019 at 18:46
I think you may have forgotten to save changes in your sandbox. Changes are reflected in the output for the person editing it even before you save, but if you don't save, no one else will see those changes. When I look at your sandbox, I don't see any warning and it isn't using react-hook-form. — Ryan Cogswell
– Ryan Cogswell, Commented Nov 27, 2019 at 18:54
You're right, apologies. I've saved it now. I've been looking further just now, and it seems to be a support issue. It's been genereally addressed here but I'd still like to think there's some way to register my components. — tyler
– tyler, Commented Nov 27, 2019 at 19:01

Bill · Accepted Answer · 2020-01-10 10:46:07Z

4

If you are using react-hook-form version 4, I would recommend using Controller:

https://react-hook-form.com/api/#Controller

and the following code demonstrate the usage:

<Controller 
  control={control}
  name="dogBreed"
  as={<Select
    label="Dog Breed"
    labelId="dog-breed-label"
    value={defaultDog.dogBreed}
    variant="filled"
    style={{ width: '100%' }}
    inputProps={{ name: 'dogBreedInput' }}
  >
    <MenuItem value="CHIHUAHUA">Chihuahua</MenuItem>
    <MenuItem value="LABRADOR">Labrador Retriever</MenuItem>
  </Select>}
/>

also, your example have two register method in the props as well.

answered Jan 10, 2020 at 10:46

Bill

19.5k21 gold badges89 silver badges135 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Manny Alvarado · Accepted Answer · 2020-05-10 23:49:17Z

This doesn't work. These plugins keep getting updated and breaking it's impossible to keep up. I'm using react-hook-form and material ui. I'm seeing the warning on load and on every keystroke.

<FormControl variant="outlined" fullWidth>
        <InputLabel style={{color: !!errors[name] ? '#f44336' : ''}}>{label}</InputLabel>
        <Controller
            control={control}
            name={name}
            as={
                <Select
                    value={value}
                    name={name}
                    onChange={handleChange}
                    label={label}
                    inputProps={{
                        name: name,
                        ref: register({
                            required: 'Required field',
                        })
                    }}
                    error={!!errors[name]}
                >
                    <MenuItem value="">
                        <em>None</em>
                    </MenuItem>
                    {options.map((key, i) =>
                        <MenuItem key={i} value={key.value}>{key.label}</MenuItem>
                    )}
                </Select>
            }
            rules={{ required: required && "Required field" }}
            defaultValue=""
        />
        <FormHelperText style={{color:'#f44336'}}>
            {!!errors[name] ? <ErrorMessage errors={errors} name={name}/> : ''}
        </FormHelperText>
    </FormControl>

Collectives™ on Stack Overflow

Why does React tell me that my Material Select input doesn't have a name?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related