CODEWITHSUNDEEP
reactjsreact-nativecheckbox
fazeel react
fazeel react

Reputation: 15

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

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 };

Upvotes: 1

Views: 2424

Answers (1)

Kartal Erkoc
Kartal Erkoc

Reputation: 290

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;
}

Upvotes: 1

Related Questions