Digamos que estoy creando una lista de tareas pendientes y construí las tareas pendientes de esta manera:
const toDo = { title: title, finished: false, }antes de empujarlos a la matriz que contiene todas las tareas pendientes. Una vez que quiero mapearlos y devolver JSX, necesito proporcionarles una clave única, pero en este caso, no tengo una clave en el objeto, entonces, ¿qué debo proporcionar en este caso?
const mappedToDoList = toDoList?.map((element) => { return ( <div className='to-do' key={???}> <p>{element.title}</p> </div> ) })No puedo usar el índice porque causa problemas tan pronto como empiezo a agregar/eliminar toDos.
tienes dos opciones aquí:
todo como este: const toDo = { id: new Date().getTime(), //a better way might be to use a uuid library to generate this title: title, finished: false, };index + title como clave solo para hacer reaccionar feliz, así: const mappedToDoList = toDoList?.map((element, index) => { return ( <div className='to-do' key={element.title + index}> <p>{element.title}</p> </div> ) })Puedes usar la biblioteca uuid
npm install uuidLuego puede agregar una identificación única para su artículo
import { v4 as uuidv4 } from 'uuid'; const toDo = { id: uuidv4(), title: title, finished: false, }Puede mapear sobre la lista de esta manera:
const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => <li>{number}</li> );