1
resposta

Warning no console por falta do atributo key no select de categoria

Percebi que o browser estava emitindo um alerta no console em virtude da falta do atributo key nas options do select de categoria.

Resolvi adicionando o key na option "sem categoria" e também na option para cada categoria existente:

        <select
          onChange={this._handleMudancaCategoria.bind(this)}
          className="form-cadastro_input">
        <option key={0}>sem categoria</option>
          {this.props.categorias.map((categoria) =>{
            return <option key={categoria}>{categoria}</option>
          }
          )}
        </select>

Mas também poderia ser resolvido usando o index:

        <option key={0}>sem categoria</option>
          {this.props.categorias.map((categoria, index) =>{
            return <option key={index+1}>{categoria}</option>
          }
          )}
1 resposta

Oi Bruno!

Parabéns por ter ido atrás de uma solução do erro mostrado no console!

A renderização de listas dinâmicas no React necessita que cada item tenha uma propriedade key única e que não mude ao longo do tempo.

A sua segunda solução (utilizando o index), apesar de funcionar não é recomendada pois os índices dos elementos podem mudar.

Por exemplo: temos a seguinte lista de categorias

const categorias = ["escola", "programação", "casa"]

Onde

categorias[0] = "escola"
categorias[1] = "programação"
categorias[2] = "casa"

Se nós removermos o último elemento, os índices de "escola" e "programação" continuarão os mesmos. Porém se removermos "escola" em vez de "casa", o array ficará assim:

categorias[0] = "programação"
categorias[1] = "casa"

Ou seja, os índices de "programação" e "casa" mudaram e isso faria com que o React se perdesse e o que seria mostrado na tela não seria necessariamente o que você espera.

Ao utilizar sua primeira solução (utilizar a própria string de categoria), o problema da chave mudar ao longo do tempo deixa de existir e o React renderizará a interface com o comportamento esperado.

Se quiser saber mais sobre este assunto, deixo o Alura+ Melhore a performance das suas listas em React e a documentação do React sobre renderização de listas.

Espero ter ajudado! Qualquer outra dúvida pode postar aqui!