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
like this

