Tengo una lista de preguntas que me gustaría representar como tarjetas ordenables. Los datos se ven algo como esto:
const questionList = [ { id: 1, data: { question: "What is your name?" } }, { id: 2, data: { question: "How old are you?" } } ... ] Estoy usando Framer Motion para extraer las identificaciones y generar un componente Reorder.Group que funciona bien para arrastrar para reordenar:
<Reorder.Group values={listIds} onReorder={handleReorder}> {listIds.map((id) => { return ( <Reorder.Item className="card" key={id} value={id}> <span>{id}.</span> <span>{questions[id - 1].data.question}</span> </Reorder.Item> ); })} </Reorder.Group>La implementación completa se puede encontrar aquí: https://codesandbox.io/s/nice-stitch-48v0ee
Sin embargo, me gustaría mantener el nuevo orden de preguntas, lo que significa que necesito reorganizar los elementos en la lista de preguntas para que coincidan con cualquier orden nuevo. ¿Cómo puedo hacer coincidir la matriz de preguntas (con identificadores) para que coincida siempre con los nuevos índices generados por la reordenación? Entonces, si el usuario cambia el orden inicial a [2, 1, 3, 4, 5] , quiero ordenar la lista de preguntas para que los identificadores de preguntas coincidan con este nuevo orden.
Puede hacerlo usando la función de map en la segunda matriz donde find el elemento que coincide con el número
Ejemplo
const questions = [ { id: 1, data: { question: "What is your name?" } }, { id: 2, data: { question: "How old are you?" } }, { id: 3, data: { question: "Where do you leave?" } }, { id: 4, data: { question: "Foo" } }, { id: 5, data: { question: "Bar" } }, ] const newOrder = [2,1,5,4,3] const newQuestionsOrdered = newOrder.map(x => questions.find(question => question.id === x)) console.log(newQuestionsOrdered)