jeudi 21 mars 2019

How to create editable checkbox dynamically using react native

I have created a checkbox list based on the data returned from the rest api.Now I need to make it editable (i.e) on clicking on the checkbox I have to store the value in JSON array against a variable .

My existing code :

componentWillMount() {

    axios
        .get("checkinOutOthers/" + this.props.navigation.state.params.regnum)
        .then(responseData => {


            var parsedValue = JSON.parse(responseData.data.items[0].other_parts);
            if (JSON.parse(responseData.data.items[0].other_parts).length != 0) {

                var parsedValue = JSON.parse(responseData.data.items[0].other_parts);
                for (var i = 0; i < JSON.parse(responseData.data.items[0].other_parts).length; i++) {
        var checkedVal=false;
    if(parsedValue[i].value==='Y')
    {
       checkedVal=true;
    }
    else
    {
       checkedVal=false;
    }

    checkBoxComponentList.push(<CheckBoxComponent 
      title={parsedValue[i].groupitem}
      checked= {checkedVal}
      onPress={this.press.bind(this)}
       /> );


    //sellablePartsCategory.push({name:parsedValue[i].groupitem},{value:checkedVal});
                }
      this.setState({ visible: true });


            }
        })
        .catch(err => {
            console.log(err);
        });
}

CheckboxComponent js code

import React, { Component } from 'react';
import { TextInput, StyleSheet, View, Text } from 'react-native';
import { CheckBox, ListItem, List } from 'react-native-elements';
import customStyles from './../css/style';

const CheckBoxComponent = ({ title, checked, onPress }) => {
return (
<View style={customStyles.menuItem}>
  <CheckBox checked={checked} onPress={onPress} />

  <Text>
    {title}
  </Text>
</View>
);
};


export default CheckBoxComponent;

How can I implement this?




Aucun commentaire:

Enregistrer un commentaire