react-native onPress() toggles automatically on a loop component rendering

Question

I'm looping through a native-base <Card dataArray={data} /> component rendering some components with Buttons. It was working alright (Listed all components as expected) but I soon added an onPress event to the Button and got an automatic onPress bug, weird enough it runs (clicks hence runs the bounded function) only once while components suppose to render with those buttons are many.

//- Inside constructor I bind testLogs
this.testLogs = this.testLogs(this);

//- Outside render...
testLogs(value) {
  console.log(value);
}

//- Inside return of render()

<Card dataArray={devices}
  renderRow={(theme) => 
    <CardItem>
      {(theme.picture) ? 
        <Thumbnail size={100} source={theme.picture} />:
        <Thumbnail size={100} source={defaultImage} />
      }
      <Text style={{fontSize: 16}}> {theme.name} </Text>
      <Button primary style={{marginRight: 10}}> Command </Button>
      <Button success onPress={this.testLogs} > Edit </Button>
    </CardItem>
  }>
</Card>

I should also say all the rendered components don't run the onPress={this.testLogs} bound function when i click them after they render.

What could be triggering this? Or is loop rendering not the best approach to this?

Thank you.

score 2 · Accepted Answer · answered Dec 12 '16 at 20:20

2

Use onPress={this.testlogs.bind(this)}

answered Dec 12 '16 at 20:20

Ahmed Ali

2,574
2
23
38

1

Ooh man, this worked! I'm getting lots of output though, but it works! Thanks. – ArchNoob Dec 12 '16 at 21:20

react-native onPress() toggles automatically on a loop component rendering

1 Answers1