How to create dynamic checkbox on JSON response in react native?

Question

I am a new bee in react native. Forgive me if I am asking repeated question. I am asking the relative question because the questions asked before on this topic is not helpful for me. I want to create the dynamic checkbox on the basis of JSON response, I have collected the data in an array, below is the code.

sellablePartsCategory = [];

the sellablePartsCategory contains the data

sellablePartsCategory = ["Brake", "Suspension", "Engine", "Tyre"]

renderParts(){
    for(let i=0; i<sellablePartsCategory.length; i++){
      return(
        <CheckBoxComponent 
            title={sellablePartsCategory[i]}
            checked= {true} /> );
    }
}

 render(){
 <View>
    <Text> {sellablePartsCategory} </Text>
      {this.renderParts()}
 </View> }

I know that return statement is breaking the for loop and make it run only one time. It is giving me the zero index value of array and then loop gets break. I don't know how to solve issue. The CheckBoxComponent.js is

import React, { Component } from 'react';                         
import {TextInput, StyleSheet, View, Text} from 'react-native';   
import { CheckBox, ListItem, List } from 'react-native-elements';  
const CheckBoxComponent = ({title, checked}) => {
return (
    <CheckBox
        title={title}
        checkedColor='#0D4A8E'
        checked={checked}
        />
);};

export { CheckBoxComponent };

fazeel react · Accepted Answer · 2018-02-01 12:33:51Z

1

In your renderParts() method, you can return all the checkboxes inside a list, using only a single return. Try the code below:

renderParts(){
    let checkBoxComponentList = [];
    for(let i=0; i<sellablePartsCategory.length; i++){
        checkBoxComponentList.push(<CheckBoxComponent 
            title={sellablePartsCategory[i]}
            checked= {true} />);
    }
    return checkBoxComponentList;
}

edited Feb 1, 2018 at 12:33

fazeel react

155 bronze badges

answered Feb 1, 2018 at 10:36

Kartal Erkoc

2901 gold badge6 silver badges12 bronze badges

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

5 Comments

Andrew Paramoshkin Over a year ago

Don't forget key prop for CheckBoxComponent. Also you can use sellablePartsCategory.map(callbackFunction) to optimize this code a little)

Kartal Erkoc Over a year ago

Happy to help :) also, merged your edit to answer @fazeelreact :)

fazeel react Over a year ago

@KartalErkoc How can I handle onPress event for each check box that to be checked?

Kartal Erkoc Over a year ago

@fazeelreact , well that requires another question and answer thread, but just to give you an idea, you can keep your checked value as a state in your CheckBoxComponent and toggle it between true and false when pressed. This also requires you to add onPress prop function to your CheckBox elements just like checkedColor and checked props. You may ask that as a separate question maybe. Because, I cannot change the answer above as it addresses a correct answer to your initial question.

Kartal Erkoc Over a year ago

hi @fazeelreact , can you mark the answer as accepted? That will be helpful for me as well :)

Collectives™ on Stack Overflow

How to create dynamic checkbox on JSON response in react native?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related