I'm trying to implement checkbox while fetching the data API from the backend but the issue that i encountered is that all the checkbox are checked and i'm unable to uncheck it and also how can i pass the selected checked checkbox as a params to the next component.Hope I could get some help.
This is what i have in my current codes;
class Gifts extends Component { constructor(props){ super(props); this.state={ users:'', checked: {}, selected: 0 } }
//api codes//handle checkbox
handleChange = (index) => { let { checked } = this.state; checked[index] = !checked[index]; this.setState({ checked }); } onPress(value) { this.setState({ selected: value });} render() { let { navigation } = this.props return (<SafeAreaView style={{flex:1 }}><View style={{ flex:1,justifyContent: 'center'}}> //...codes..//<View style={styles.userlist}><FlatList data={this.state.users} keyExtractor={(item ,index) => index.toString()} renderItem={({ item }) => (<FlatList data={item.friendList} renderItem={({ item }) => <View style= {{flexDirection:'row', justifyContent:'space-between'}}><Text style={{marginTop:20, marginLeft:10, fontSize: 20}}>{item.name}</Text><CheckBox center checkedIcon='dot-circle-o' uncheckedIcon='circle-o' checked={this.state.checked} value={ this.state.checked[item.flag]} onPress={this.onPress} /> </View> } keyExtractor={(item ,index) => index.toString()} ItemSeparatorComponent ={this.ItemSeparator} /> )} /></View><Button rounded // disabled={true} //onPress={} style={{width: 100, justifyContent: 'center',marginLeft:150}}><Text>Send</Text></Button></View></SafeAreaView> ); }}