import React from "react"; import { useState } from "react"; import Select from "react-select"; const EditMitarbeiter = () => { const optionsField1 = [ { id: "1", value: "test1", label: "Test1"}, { id: "2", value: "test2", label: "Test2"}, { id: "3", value: "test3", label: "Test3"}, { id: "4", value: "test4", label: "Test4"}, ]; const[functions, setFunctions] = useState([ {field1:"test1",field2:"test2",field3:"test3",input:"Test"} ]); const handleFunctionAdd = () => { setFunctions([...functions, {field1:"",field2:"",field3:"",input:""}]); }; const handleFunctionRemove = (event, index) => { event.preventDefault(); // verhindert Default Verhalten von Button, ist somit kein "Submit-Button" mehr und lädt Seite nicht neu console.log(index); // FEHLER: este Funktion wird nicht entfernt, sondern folgende const list = [...functions]; list.splice(index,1); setFunctions(list); }; const handleFunction1Change = (event, index) => { const newFunctions = [...functions]; newFunctions[index].field1 = event.value; setFunctions(newFunctions); } return ( <div> <div id="content"> <form id="Funktion"> <legend>Funktionen</legend> {functions.map((f,index) => ( <div key={index} id="function-box"> <div class="ReactSelect"><Select options={optionsField1} defaultValue={f.field1} onChange={(event) => handleFunction1Change(event,index)}/></div> </div> ))} </form> </div> </div> ); } export default EditMitarbeiter;

Tengo el problema de que la etiqueta de ReactSelect no cambia y se queda en blanco. Ya revisé algunas preguntas similares, pero no pude entender por qué mi ejemplo no funciona a pesar de que usé las soluciones de las otras preguntas.

También una pregunta secundaria, ¿vale la pena usar ReactSelect sobre el HTMLSelect normal porque solo tengo problemas con ReactSelect ...