CODEWITHSUNDEEP
typescriptreact-nativecheckboxstore
Roseanne
Roseanne

Reputation: 77

How to map array into checkbox for React Native [TypeScript]?

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

Answers (1)

suther
suther

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

Related Questions