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