0

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

1 Answers1

0

replace

onPress={console.log("Pressed")} 

with

onPress={() => console.log("Pressed")}
Ahmed Ali
  • 2,574
  • 2
  • 23
  • 38