'Change radiobutton state from api data - React native
Im getting data from an api where i have posted some answers from radio button. Im doing a functionality where users can save their progress and can continue later. Here is the radiobuttons code :
const [answers, setAnswers]= useState([]);
const [evQuestions, setEvQuestions] = useState([]);
const getEvaluationsQuestionsByOrganizations = async () => {
await apiStandarts
.get(`/evaluation-questions?organization=${stat.token}`)
.then((res) => {
if (res.length) {
for (const _res of res) {
if (_res.questId) {
_res["question"] = questions.find(
(question) => question.questId === _res.questId
);
_res['question_option'] = _res.question?.question_options?.find(qOpt => qOpt.questOptionId === _res.questOptionId) ?? {}
}
}
}
// console.log(res)
setEvQuestion(res.data);
return res;
});
};
const isOptionSelected = (option) => {
const answer = evQuestion;
if(answer && route.params) {
return answer.find(ans => option.id == ans.questOptionId )
} else {
const answer = answers[option.question]
if(answer){
return option.id == answer.id
}
}
return false;
};
const OptionList = (groupOption) => {
return groupOption.options.map((item, index) => {
const fnSelectedOption = () => {
const selectedOption = { [item.question]: { ...item } };
setAnswers({ ...answers, ...selectedOption });
};
const status = isOptionSelected(item) ? true : false;
return (
<Radio
initialValue={status}
label={item.description}
onChange={fnSelectedOption}
color="rgba(0,0,0,.54)"
radioInnerStyle={{ backgroundColor: '#3671a6' }}
labelStyle={styles.label}
containerStyle={{ width: DEVICE_WIDTH * 0.8, paddingVertical: 5 }}
key={item.id}
/>
);
});
};
Here is the get request:
const loadStepData = async () => {
let value = null
questions.map((question) => {
const foundEvQuestion = evQuestion.find(evQuestion => evQuestion?.question?.questId === question.questId)
value = foundEvQuestion?.questOptionId
const values = value
});
return values;
}
Here is the json of the data:
Array [
Object {
"created_at": "2022-02-16T09:56:08.052Z",
"id": 913,
"organization": 179,
"organization_evaluation": null,
"questId": 1,
"questOptionId": 4,
"question": null,
"question_option": null,
"question_option_points": 4,
"updated_at": "2022-02-18T15:13:33.266Z",
},
Object {
"created_at": "2022-02-16T10:28:39.349Z",
"id": 930,
"organization": 179,
"organization_evaluation": null,
"questId": 2,
"questOptionId": 7,
"question": null,
"question_option": null,
"question_option_points": 2,
"updated_at": "2022-02-21T11:54:04.784Z",
},
Object {
"created_at": "2022-02-16T11:19:12.924Z",
"id": 947,
"organization": 179,
"organization_evaluation": null,
"questId": 3,
"questOptionId": 9,
"question": null,
"question_option": null,
"question_option_points": 1,
"updated_at": "2022-02-18T15:30:24.020Z",
},
Updated the code.I pass a hash in the route.params that corresponds to user when he saved the data. The radio button now come checked but cant change their value anymore. Now how can i change the radio button initial state based on this data? Any ideas would be helpful.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
