how to read value from API in react select

Viewed 120

Hi I have react select input and I was using useForm to setValue to inputs How to read value from api and append it to my react select input

api return

const createQuestion = {
    _id: "da2sd3dsa5d56a5sdd5as48d4a94949",
    framework: "hard",
    benchmark: "hard",
    difficulty: "hard",
    questionHeader: "good job!",
    Keywords: [ // this my target to get the data from it
            { value: "one", label: "one" },
            { value: "two", label: "two" },
        ],
    isAnswerTrue: "false",
    articleAnswer: { answer: "good place to do" },
};

UseForm

type DynamicForm = {
    checked?: boolean;
    answer: any;
    id: any;
};

type FormValues = {
    framework: string;
    benchmark?: any;
    difficulty?: any;
    questionType?: any;
    mcqQuestion?: any;
    questionHeader?: any;
    mcqAnswer?: any;
    Keywords: any;
    isAnswerTrue?: any;
    articleAnswer?: any;
    fillInBlankAnswer?: any;
    answerData: DynamicForm[];
};

read values from API

useEffect(() => {
    if (createQuestion && createQuestion != null) {
        setValue("framework", createQuestion?.framework);
        setValue("benchmark", createQuestion?.benchmark);
        setValue("difficulty", createQuestion?.difficulty);

        setValue("Keywords", createQuestion?.Keywords); // setValue for react select

        setValue("isAnswerTrue", createQuestion.isAnswerTrue === "true" ? "true" : "false");
        setValue("articleAnswer", createQuestion?.articleAnswer.answer);
    } else {
        console.log("error in set values");
    }
}, []);

react select

<Controller
    {...{
        control,
        register,
        name: "Keywords",
        rules: {
            required: true,
        },
        render: (props: any) => (
            <CreatableSelect
                components={components}
                inputValue={inputValue}
                isClearable
                isMulti
                menuIsOpen={false}
                onChange={handleKeywordChange}
                onInputChange={handleKeywordInputChange}
                onKeyDown={handleKeyDown}
                placeholder="Enter Keywords"
                value={value}
                className="react-select-container"
                classNamePrefix="react-select"
                styles={colorStyles}
            />
        ),
    }}
/>

how to make input get value when page render

enter image description here

like this

enter image description here

0 Answers
Related