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

Question

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.

suther · Accepted Answer · 2020-04-02 10:29:56Z

2

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

edited Apr 2, 2020 at 10:29

answered Apr 2, 2020 at 7:07

suther

13.8k6 gold badges73 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Roseanne Over a year ago

I already tried your method. However, I encounter an error TypeError: Cannot read property 'map' of undefined. {response.map(item => is not working.

Hayk Shakhbazyan Over a year ago

try {response && response.map(item => ...)}

Roseanne Over a year ago

@HaykShakhbazyan wow! after I tried ` {response && response.map(item => ...`, its working but unfortunately my checkbox is not appear on the screen

Roseanne Over a year ago

There is an error occur at const { response } = StudentData; which make my checkbox not appear on the screen. Any idea on how I can make my checkbox appear on the screen? Thank you :)

suther Over a year ago

Sorry, I had an issue in my code. I fixed it above. For sure, you have to iterate over your Object with Object.keys(). This way it should work. Here I've also created a little example to show how it work: jsbin.com/javayolaqa/edit?html,js,output

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related