React Native <ListItem onPress={...}> - why is this function executing?

javascript, native-base, react-native, react-native-router-flux

Solution

Try to do `<ListItem button onPress={() => {goToView2(guest)}}`

Problem

I'm just starting to wrap my head around React Native and am using Redux for management of `state`, the NativeBase library for my UI components and react-native-router-flux is handling navigation between views. Currently I'm building a basic list that is created from an array of `guest` objects. The list is stored in the Redux store and I'm able to access it and display accordingly. Each item in the list is associated with a `guest` within a `guests` array. I'd like to make each item in the list touchable, and then pass the relevant `guest` object as a property to the next view to display details. To do so I'm using the `onPress` function which is a standard function associated with the `ListItem` component (see NativeBase docs here). I've also followed the documentation for `react-native-router-flux` and defined the navigation action outside of the component itself so that the `ListItem` calls it when pressed and not each time it renders. My problem is that I am finding that the `onPress={goToView2(guest)}` function is being called each time the `ListItem` is rendered rather than specifically when the `ListItem` is pressed. I am sure it must be something simple that I have omitted. Any suggestions? View1.js - view that displays initial list of `guests`: ``` import React, { Component } from 'react'; import { Container, Header, Title, Content, Footer, FooterTab, Button, Icon, Text, List, ListItem } from 'native-base'; import { connect } from 'react-redux'; import { Actions as NavigationActions } from 'react-native-router-flux'; class View1 extends Component { render() { // This is the function that runs every time a ListItem component is rendered. // Why is this not only running on onPress? const goToView2 = (guest) => { NavigationActions.view2(guest); console.log('Navigation router run...'); }; return ( <Container> <Header> <Title>Header</Title> </Header> <Content> <List dataArray={this.props.guests} renderRow={(guest) => <ListItem button onPress={goToView2(guest)}> <Text>{guest.name}</Text> <Text note>{guest.email}</Text> </ListItem> } > </List> </Content> <Footer> <FooterTab> <Button transparent> <Icon name='ios-call' /> </Button> </FooterTab> </Footer> </Container> ); } } const mapStateToProps = state => { console.log('mapStateToProps state', state); return { guests: state.guests }; }; export default connect(mapStateToProps)(View1); ``` View2.js - view that displays details of the selected `guest` from `View1.js`: ``` import React, { Component } from 'react'; import { Container, Header, Title, Content, Footer, FooterTab, Button, Icon, Text, List, ListItem } from 'native-base'; class View2 extends Component { render() { console.log('View2 props: ', this.props); return ( <Container> <Header> <Title>Header</Title> </Header> <Content> <Content> <List> <ListItem> <Text>{this.props.name}</Text> </ListItem> </List> </Content> </Content> <Footer> <FooterTab> <Button transparent> <Icon name='ios-call' /> </Button> </FooterTab> </Footer> </Container> ); } } export default View2; ```

Original source