Reputation: 77
I am new to React Native. I am currently using TypeScript for my React Native project. Right now, I am having a difficulty on how to map array into checkbox. Below is my json file:
{
"stud_name": "Adam",
"sex": "male",
"attendance": false,
"eligibility": false
}
I would like to map attendance
and eligibility
inside the checkbox. Below is my React Native code for the checkbox.
export const StudentRegisterExam: React.FC<Props> = ({}) => {
const StudentData = useContext(StudentStoreContext);
const firstRender = useRef(true);
useEffect(() => {
if (firstRender.current) {
firstRender.current = false;
return;
}
if (response !== undefined) {
if (response.status === 201 || response.status === 200) {
StudentData.details = {
name: response.data.name,
sex: response.data.sex,
eligibility: response.data.eligibility,
attendance: response.data.attendance
};
}
}
}, [response]);
return (
<View>
<Text>{StudentData.response.name}</Text>
<Text>{StudentData.response.sex}</Text>
<CheckBox /> <- how should I write {StudentData.response.eligibility} into checkbox
<CheckBox />
</View>
);
Thank you in advance. For the StudentData
, I created a file name StudentStore.ts
inside my store folder.
Upvotes: 0
Views: 997
Reputation: 13628
I don't fully get your point. Mapping an array means iterating over each of it's values. But it seems you mean how to get the Data into your -Component?
The question at all is, how does your checkbox-component looks like. You should post the source-code of it... or do you use a UI-Library like react-elements
.
In case of react-elements
-Checkbox you can do it like this:
const { response } = StudentData;
return (
{ Object.keys(response).map(item =>
<View>
<Text>{response[item].stud_name}</Text>
<Text>{response[item].sex}</Text>
<CheckBox
center
title='{response[item].stud_name}'
checked={response[item].eligibility}
/>
</View>
) }
);
Hope that gives you an Idea.
Think the thing you've searched for was how to execute a loop in your JSX, isn't it? Or was it how to put parameters into an Component?
So you can execute it within { }, but you can only use expressions there... no classical if, for or while-loops. So go with method-calls like yourArr.forEach, yourArr.map or ternary operator as replacement for if-conditions
Upvotes: 2