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":

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 proyecto011

Almacenar en una variable de 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 { useState } from "react";

function App() {

  function borrar(cod) {
    const temp = articulos.filter((art)=>art.codigo !== cod);
    setArticulos(temp)
  }

  const [articulos, setArticulos] = useState([{
    codigo: 1,
    descripcion: 'papas',
    precio: 12.52
  }, {
    codigo: 2,
    descripcion: 'naranjas',
    precio: 21
  }, {
    codigo: 3,
    descripcion: 'peras',
    precio: 18.20
  }]);

  return (
    <div>
      <table border="1">
        <thead><tr><th>Código</th><th>Descripción</th><th>Precio</th><th>Borra?</th></tr></thead>
        <tbody>
          {articulos.map(art => {
            return (
              <tr key={art.codigo}>
                <td>
                  {art.codigo}
                </td>
                <td>
                  {art.descripcion}
                </td>
                <td>
                  {art.precio}
                </td>
                <td>
                  <button onClick={() => borrar(art.codigo)}>Borrar</button>
                </td>
              </tr>
            )
          })}
        </tbody>
      </table>
    </div>
  );
}

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):

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

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

Retornar

11 - Propiedad key en listas de datos

Problema