0

Possuo o seguinte componente de select do material-ui-react:

<FormControl fullWidth variant="outlined" className={classes.formControl}>
  <InputLabel ref={inputLabel} htmlFor="outlined-age-native-simple">
    Filial
  </InputLabel>
  <Select
    onChange={handleChange}
    onBlur={handleBlur}
    error={touched.filial && Boolean(errors.filial)}
    value={values.filial}
    defaultValue={'DEFAULT'}
    inputProps={{
      name: 'filial',
      id: 'outlined-filial-native-simple',
    }}
  >
    <option value="DEFAULT" disabled>Choose a salutation ...</option>
    <option value={10}>Ten</option>
    <option value={20}>Twenty</option>
    <option value={30}>Thirty</option>
  </Select>
</FormControl>

Quando eu altero o select eu recebo:

index.js:1 Warning: Use the defaultValue or value props on instead of setting selected on

Estou utilizando o formik para tratar o formulário:

const enhanceWithFormik = withFormik({
  mapPropsToValues: () => ({ email: '', password: '', filial: '' }),
  handleSubmit: values => {
    console.log(values)
  },
  isInitialValid: false,
  validateOnChange: true,
  validateOnBlur: true,
  displayName: 'MyForm',
  validationSchema: schema
})

Quando eu preencho todos os campos e clico no botão de submit, é mostrado corretamente o valor que selecionei no select, porém estou recebendo esse erro.

1
  • Você pode enviar o código da function handleChange? Commented 29/02/2020 às 13:20

1 Resposta 1

1

Aos fatos

Para esclarecer, vamos entender o motivo de você estar recebendo esta mensagem antes de entrarmos no porquê.

Essa mensagem é dada pelo React e não pelo Material-UI. Precisamos entender é que o React sempre trabalha com componentes controlados ou não-controlados. Sendo componentes controlados o recomendado. Aqui segue uma palhinha da documentação.

Quando o componente é controlado o estado que define a seleção é pela propriedade value. Assim sendo o React não espera que um elemento <option>, onde seu elemento pai é controlado, esteja marcado com o atributo selected. Ou seja códigos assim irão cair nessa mensagem e o atributo selected será ignorado:

    <select onChange={handleChange} value={values.filial}>
      <option value="DEFAULT" disabled>Choose a salutation ...</option>
      <option selected value={10}>Ten</option>
      <option value={20}>Twenty</option>
      <option value={30}>Thirty</option>
    </select>

    <ul onChange={handleChange} value={values.filial}>
      <option value="DEFAULT" disabled>Choose a salutation ...</option>
      <option selected value={10}>Ten</option>
      <option value={20}>Twenty</option>
      <option value={30}>Thirty</option>
    </ul>       

Mas então porque estou recebendo esta mensagem no <Select> do Material-UI se eu não estou colocando selected no elemento <option>?

O que esta ocorrendo é que o Select do Material-UI (reforçando, não é o elemento nativo <select>), quando controlado por uma propriedade value e não marcado com a propriedade native, espera que suas opções sejam elementos <MenuItem> e não <option>.

O Select do Material-UI irá renderizar as opções em um menu suspenso encaminhando a a propriedade select para o elemento <MenuItem> que está selecionado(apenas indicando para aplicar estilos CSS de elemento selecionado).

<MenuItem selected value={10}>Ten</MenuItem>

Renderizando então em:

<li value={10}>Ten</li>

Note que ao renderizar a propriedade selected não estará presente. A renderização final com Material-UI ficará assim:

  <ul onChange={handleChange} value={values.filial}>
    <li value="DEFAULT" disabled>Choose a salutation ...</li>
    <li value={10}>Ten</li> //Renderiza com os estilos de CSS de um elemento selecionado
    <li value={20}>Twenty</li>
    <li value={30}>Thirty</li>
  </ul> 

Note que o componente <MenuItem> é transformado em elemento <li> filho de um elemento <ul>.

Quando se utiliza o elemento <option> o Material-UI irá fazer o mesmo processo, porém ao identificar o item que está selecionado, ele irá encaminhar a mesma propriedade select para o elemento que colocarmos, nesse caso <option>.

<option selected value={10}>Ten</option>

No processo de renderização do React, ele irá detectar um elemento controlado marcado com selected, caindo assim no cenário onde temos um elemento option com o atributo selected, gerando a mensagem citada.

Então:

Ao usar o Select do Material-UI, sempre não sendo marcado com a propriedade native, use <MenuItem> para suas opções. Caso contrário pode utilizar normalmente o elemento <option>.

Outra dica com relação ao uso dos compontentes React, caso você use um componente controlado, evite o uso da propriedade defaultValue, use o value para controlar, instanciando seu componente com a opção default no valor de value.

const [filial, setFilial] = React.useState("DEFAULT")

Isso ajuda a evitar alguns warnings.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .