Por lo tanto, intentaré brindar la mayor cantidad de información posible, pero si necesita más, puedo brindársela.

Estoy creando un sitio web que tiene un menú desplegable que dentro tiene algunas opciones de una matriz, digamos que hay 4 para este ejemplo A, B, C y D. Ahora este menú desplegable funciona muy bien al devolver la selección que hice a esta función. abajo.

 //Array example letterArray = [ {letter: "A"}, {letter: "B"}, {letter: "C"}, {letter: "D"} ] function changeLetter(value){ console.log(value.letter); // This returns whichever one I selected nicely so if i click A in the dropdown i get A back. }

Imagina que estoy creando una palabra de 4 letras, digamos "ABCD" para mantenerlo simple, lo que necesito hacer es representar 4 de mis menús desplegables. En la carga de la página, solo renderizo 1 porque no sé la longitud de la palabra que el usuario quiere hacer. Tengo algo como esto para mapearlos.

 {numberOfLetters.map((_, index) => { return( <div key={index} <LetterSelection onChange={changeLetter} /> //THIS IS MY DROPDOWN COMPONENT </div> ) })

Luego tengo un botón que aumenta el número de letras para aumentar la matriz, lo que hace que el mapa sea más largo. Todo esto funciona bien todavía...

Mi intento de hacer que esto funcione es así, cambio mi función para tener un estado como este.

 const [array, setArray] = useState([]); function changeLetter(value){ setArray(oldArray => [...oldArray, {option: value.letter}]) console.log(array); }

Esto empuja mi selección a la matriz muy bien y casi me da lo que quiero.

EL PROBLEMA

Si el usuario decide cambiar la selección de decir "A,B,C,D" a "A,C,B,D", se agrega otra letra a la matriz que se convierte efectivamente en "A,B,C,D,C". . Pensé en usar el empalme aquí para obtener solo los 4 que quiero, pero luego se pierde una de las opciones seleccionadas por el usuario (¡No es la correcta!).

Entonces, ¿cómo lo obtengo para que actualice la selección correcta en lugar de agregar un nuevo objeto a la matriz?

Puede publicar más código si es necesario.