Tengo una galería que muestra varios libros por fila. Esta galería toma una matriz de libros como accesorio y utiliza el accesorio "itemsPerRow" para dividir los libros en una matriz de 2 dimensiones y luego recorre todos los libros para mostrar los libros en una estructura similar a una cuadrícula.
export default function Gallery({ items, itemsPerRow, renderLink }) { itemsPerRow = itemsPerRow ?? 3 const rows = chunk(items, itemsPerRow) const renderEmptyItems = (itemsToRender) => { const items = [] for(let n = itemsToRender; n > 0; n--) { items.push(<GalleryItem key={`empty_${n}`} empty/>) } return items } return ( <div> { rows.map((row, index) => ( <div key={index} className="tile is-ancestor"> {row.map(item => <GalleryItem key={item.id} renderLink={renderLink} {...item}/>)} {/* Add empty gallery items to make rows even */} {index + 1 === rows.length && renderEmptyItems(itemsPerRow - row.length)} </div> )) } </div> ) } Sin embargo, a menos que le dé una clave a cada div que representa una fila, reaccionar se queja de la falta de claves. Según tengo entendido, usar el índice como clave realmente no ayuda a reaccionar y debe evitarse. Entonces, ¿qué debo usar como clave aquí <div key={index} className="tile is-ancestor"> en lugar del índice?
Use un identificador único ( book.id , tal vez book.title si es único) para los accesorios key . Si sus datos no tienen un identificador único, está bien usar index .
Debe especificar un valor que identifique de forma única el elemento, como la identificación. Puede leer más sobre las claves en la documentación .
Además, no se recomienda usar índices como claves si el orden de sus datos puede cambiar, ya que React se basa en las claves para saber qué componentes volver a renderizar, la documentación que vinculé lo explica con más detalle.
Puede usar el identificador_único que diferencia cada uno de los documentos (probablemente, debería pasar el _id del documento como elemento clave en los componentes de la fila)
<div className="row"> {notes.map((item) => { return ( <div key={note._id} className="col-md-6"> <Component item={item} /> </div> ); })} </div>