Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

104
Views
React Select does not change Label according to defaultValue
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;

I got the problem that my the label of the ReactSelect does not change and it stays blank. I already looked through some similar questions but i couldn't figure out why my example does not work even though i used the solutions of the other questions.

Also a side question, is it worth to use ReactSelect over the normal HTMLSelect cuz i just get problems with the ReactSelect...

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

f.field1 = "test1" That presenting in default value

defaultValue="test1"

but default value must be like this

defaultValue={{label:"xyz",value:"xyz"}}

Fou You , this will work

 defaultValue={optionsField1.find((d) => d.value === f.field1)}
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!