11 - Propiedad key en listas de datos

En un concepto anterior vimos como mostrar, modificar y borrar elementos de una vector almacenado en el 'estado' de la componente. Si volvemos a ejecutar la aplicación y activamos la opción del navegador para ver "Las herramientas para desarrolladores" podremos comprobar que React nos informa de un "Warning":

key en listas

Este problema se debe a que React nos informa que debemos definir una propiedad en las listas de datos para permitir que React sea más eficiente en el agregado, modificación y borrado de elementos.

En el atributo key debemos asignar un valor distinto para cada elemento.

Problema

Crear un nuevo proyecto con la herramienta create-react-app llamado proyecto010

Almacenar en el estado de la componente el siguiente vector:

        articulos: [{
                      codigo: 1, 
                      descripcion: 'papas',
                      precio: 12.52
                   },{
                      codigo: 2, 
                      descripcion: 'naranjas',
                      precio: 21
                   },{
                      codigo: 3, 
                      descripcion: 'peras',
                      precio: 18.20
                   }]

App.js

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      articulos: [{
                      codigo: 1, 
                      descripcion: 'papas',
                      precio: 12.52
                 },{
                      codigo: 2, 
                      descripcion: 'naranjas',
                      precio: 21
                 },{
                      codigo: 3, 
                      descripcion: 'peras',
                      precio: 18.20
                 }]
    }
    this.borrar = this.borrar.bind(this);
  }
  render() {
    return (
      <div>
        <table border="1">
        <thead><tr><th>Código</th><th>Descripción</th><th>Precio</th><th>Borra?</th></tr></thead>
        <tbody>
        {this.state.articulos.map(elemento => {
          return (
            <tr key={elemento.codigo}>
              <td>
                {elemento.codigo}  
              </td>
              <td>
                {elemento.descripcion}
              </td>
              <td>
                {elemento.precio}
              </td>              
              <td>
                <button onClick={()=>this.borrar(elemento.codigo)}>Borrar</button>
              </td>
            </tr>
          )
        })}    
        </tbody>    
        </table>
      </div>
    );
  }

  borrar(cod) {
      var temp = this.state.articulos.filter((el)=>el.codigo !== cod);
      this.setState({
        articulos: temp
      })
  }  
}

export default App;

Cuando generamos la lista de filas de la tabla añadimos la propiedad 'key' a cada elemento HTML 'tr' (utilizamos el atributo codigo que es la clave primaria en el vector de artículos):

        {this.state.articulos.map(elemento => {
          return (
            <tr key={elemento.codigo}>
              <td>
                {elemento.codigo}  
              </td>
              <td>
                {elemento.descripcion}
              </td>
              <td>
                {elemento.precio}
              </td>              
              <td>
                <button onClick={()=>this.borrar(elemento.codigo)}>Borrar</button>
              </td>
            </tr>
          )
        })}    

Ahora si ejecutamos la aplicación podemos comprobar que no se genera el "Warning".

key en listas