How do i fill and remove an item into an array depending on its state? - react-native

Question

i am developing an React Native Android App.
I am receiving data (id and name) from my API. Now i am using a ListView with MKIconToggle (react-native-material-kit) to display my list data.
With MKIconToggle i can give my displayed items two different states (clicked = color is black / unclicked = grey). Now i want to send the list of clicked items back to my server. But i just can´t figure out how i put the clicked items for example into an array or something and only send clicked items to server.
My RenderMethod with the ListView looks like this:
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderList}
horizontal={true}
renderHeader={this.renderHeader}
/>
RenderList:
<View
style={{justifyContent: 'flex-start', alignItems: 'center', padding: 10, flexDirection: 'column'}}>
<MKIconToggle
checked={this.state.initialChecked}
onCheckedChange={()=>this._onIconChecked(data)}
onPress={this._onIconClicked}
style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
<Text state_checked={this.state.checkedState}
pointerEvents="none"
style={styles.titleChecked}
numberOfLines={3}>{data.name}</Text>
<Text pointerEvents="none"
style={styles.title}
numberOfLines={3}>{data.name}</Text>
</MKIconToggle>
</View>
Now i should handle my clicked Items in _onIconChecked:
_onIconChecked: function (data) {
// Put data.id into an array, if it way clicked (state is true)
// If date.id is unclicked again, then remove from array
},
I hope i could explain my issue clearly, otherwise just let me know. I am new in programming and writing stackoverflow issues/questions, so please give me hints if i made something wrong.

Answer 1

From your information I will have to make a few assumptions in order to be able to answer your question.
For now I will assume that that checked handler properly returns the 'id' of an item that is the same id as in your array of items.
So assuming your array is:
[{name: 'Luke', id: 1'}, {name: 'Darth', id: 2'}]
If I were to click on 'Luke' _onIconChecked would receive a data object that at least has id: 1 in it.
The second assumption is that you have an array somewhere where you can store those clicked items. I would just put that outside of your component seeing as MK would already take care of properly rendering a checked item. So:
var _checkedItems = []
var myComponent = React.create...
The last assumption is that the data object passed to _onIconChecked also contains information on the state of the checkbox, so date.checked is either true or false.
The precise implementation might be different for all these items, but this is what I can work off of.
Now what you could do is:
_onIconChecked: function (data) {
var id = data.id;
var checked = data.checked;
var currentIndex = _checkedItems.indexOf(id)
if(checked) {
if(currentIndex == -1) { _checkedItems.push(id) }
// the 'else' would mean the item is already in the array, so no need to add
} else {
if(currentIndex > -1) {
// This means that the item is in the array, so lets remove it:
_checkedItems.splice(currentIndex, 1) // This removes the id from the array.
}
}
}
What you'd do now to only get the items from your this.state.items array that have their ids in the checked array:
getCheckedItems: function() {
return this.state.items.map(function(item) {
if(_checkedItems.indexOf(item.id) > -1){
return item
}
})
}
I am not sure about your setup so I made lots of assumptions and probably over engineered some things, but it might get you going in the right direction.