Tengo una app de react que tiene un componente tabla que imprime X cantidad elementos tr y td de acuerdo al prop data el cual es un array de objectos, dicho objectos tienen un id, el cual estaba usando para generar las key, el problema es que este id solo me sirve para un elemento y como pueden ver necesito generar varios ids para todos estos elementos porque si no react me lanza el siguiente error.
Encountered two children with the same key
Ejemplo de la data:
[
{ id:1, name: "carro", quantity: 12 },
{ id:2, name: "microfono", quantity: 12 },
{ id:3, name: "pc", quantity: 12 },
]
Mi componente tabla:
import { Table } from "react-bootstrap";
export const TableComponent = (props) => {
return (
<div>
<Table striped bordered hover responsive>
<thead>
<tr>
<th>NOMBRE</th>
<th>CANTIDAD</th>
<th>OPCIONES</th>
</tr>
</thead>
<tbody>
{/* TODO: generate unique keys */}
{props.data.map((e, index) => {
return (
<tr key={e.id}>
<td key={e.id}>{e.name}</td>
<td key={e.id}>{e.quantity}</td>
<td key={e.id}>borrar</td>
</tr>
);
})}
</tbody>
</Table>
</div>
);
};
¿Cómo generar keys unicas para evitar este error?
map
en eltr
? O también crear un id personalizado, saludosindex
si los ID's no son estables, como último recurso. Saludos