I got a response from API which i then parse and display some features on the screen using nativebase.io cardlist. When all the results are shown i want each card be clickable and each click leading to the next screen of details depending on a particular card's content. However, when the cardlist is rendered for some reason EVERY card is being clicked without the user interaction. So i'm looking for the solution which would allow a card click only when i touch any particular card.
class Results extends Component{
constructor(props){
super(props);
this.state = {
data: this.props.results
}
}
renderRow(item){
const bars = [ require('../assets/bar0.png'),
require('../assets/bar1.png'),
require('../assets/bar2.png'),
require('../assets/bar3.png')]
var bar = item.weight === -1 ? bars[0] : bars[item.weight]
return (
<CardItem button onPress={console.log("Pressed")} style={{width: 400}}>
<Thumbnail source={bar}/>
<Text>{item.label}</Text>
<Text note style={{textDecorationLine: 'line-through'}}>{item.excluded}</Text>
</CardItem>
)
}
render(){
console.log(this.state.data)
return (
<Container>
<Header>
<Title>symptoma</Title>
</Header>
<Content>
<Card dataArray={this.state.data}
renderRow={(item) =>
this.renderRow(item)
}>
</Card>
</Content>
</Container>
);
}
}
export default Results