I have created a list view with selectable rows but when the rows go beyond 10 the selection stops working.
Here it is with only 9 items added to the list:
// Individual row function
row(data, secId, rowId) {
// place in queue
let place = Number(rowId) + 1;
// set the selected queuer to show its page
let setSelectedQueuer = () => {
this.setState({
selectedKey: data._key,
editName: data.name,
editParty: data.partySize,
editPhone: data.phoneNumber,
editNotes: data.notes
});
}
return (
<Queuer
key={data._key}
queuerKey={data._key}
place={place}
name={data.name}
selectedKey={this.state.selectedKey}
createdAt={data.createdAt}
partySize={data.partySize}
onPress={setSelectedQueuer}
/>
);
}
This sets each rows key when created and when clicked changes the state to then be compared on each row individual row item.
let isSelected = () => {
if (this.props.queuerKey === this.props.selectedKey) {
return Colors.info;
} else {
return 'white';
}
}
Working great until a tenth item is added and it just stops.
Clicking on other row items but the style is not changing. Something weird is happening when the 10th item is added.