jeudi 1 février 2018

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={label}
            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 };




Aucun commentaire:

Enregistrer un commentaire