cannot bind functions in react native

Question

I have tried all the possible solutions that I know of. I have tried several other solutions to similar problems but I do not understand how this is supposed to work. I am trying to call a function from inside a ListView renderRow method. I can now call the function but I cannot pass in the selected rowData that I need. This is what I am getting:

I need the selected rowData. here is code

     constructor(props) {
        super(props);
        this.onSubmitTrip = this.onSubmitTrip.bind(this);
        this.onSelectTrip = this.onSelectTrip.bind(this);
        this.renderRow = this.renderRow.bind(this);

        this.state = {
            dataSource: ds,
            showSubmitTripBtn: false
        }
    }
    onSelectTrip(rowData) {
        selectedTrip = rowData;
    }

  renderRow(rowData) {
        return (
            <TouchableHighlight onPress={this.onSelectTrip}  underlayColor='#dddddd'>
                <View style={styles.row}>
                    <View style={{ paddingLeft: 5 }}>
                        <View>
                            <Text style={{ fontWeight: "bold", fontSize: 24 }}>{rowData.tripName}</Text>
                        </View>
                    </View>
                </View>
            </TouchableHighlight>
        )
    }

"I can now call the function but I cannot pass in the selected rowData that I need." I don't see where you are calling the method. Passing the data is as simple as this.renderRow(theData). — Felix Kling
– Felix Kling, Commented May 10, 2016 at 18:16

Tyler · Accepted Answer · 2016-05-11 04:25:07Z

1

Okay from what I can see you aren't actually passing onSelectTrip your rowData when your TouchableHighlight is pressed.

// Change this
<TouchableHighlight
  onPress={this.onSelectTrip}
  underlayColor='#dddddd'
>

// To this
<TouchableHighlight
  onPress={() => this.onSelectTrip(rowData)}
  underlayColor='#dddddd'
>

Also while looking at your screenshot I noticed another potential issue further down in the onSelectTrip method with your lodash _.each call. You need to pass _.each a fat arrow as the callback if you want to use this.setState() inside of it.

// Change this
_.each(rowData.routeLocations, function(item) {

// To this
_.each(rowData.routeLocations, (item) => {

answered May 11, 2016 at 4:25

Tyler

1,6623 gold badges18 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aditya Singh · Accepted Answer · 2016-05-10 17:33:49Z

1

How about using the ES6 lambda's instead of explicitly binding all the methods in the class constructor to provide the lexical binding. I think this should solve your issue:

constructor(props) {
    super(props);
    this.onSubmitTrip = this.onSubmitTrip.bind(this);
    this.renderRow = this.renderRow.bind(this);

    this.state = {
        dataSource: ds,
        showSubmitTripBtn: false
    }
}

onSelectTrip = (rowData) => {
    selectedTrip = rowData;
}

renderRow(rowData) {
    return (
        <TouchableHighlight onPress={this.onSelectTrip(rowData)}  underlayColor='#dddddd'>
            <View style={styles.row}>
                <View style={{ paddingLeft: 5 }}>
                    <View>
                        <Text style={{ fontWeight: "bold", fontSize: 24 }}>{rowData.tripName}</Text>
                    </View>
                </View>
            </View>
        </TouchableHighlight>
    )
}

answered May 10, 2016 at 17:33

Aditya Singh

16.8k15 gold badges49 silver badges70 bronze badges

6 Comments

texas697 Over a year ago

it appears it is trigging the function on page load. other than bunch of redlines underneath my code I am getting TypeError: Cannot read property 'setState' of undefined(…) !!!

Aditya Singh Over a year ago

Is the above code complete? I am not seeing any setState

texas697 Over a year ago

no, i will create plunker with all of it. wasnt sure what all you needed.

Aditya Singh Over a year ago

Try changing the anonymous function for _.each in onSelectTrip method with a lambda.

texas697 Over a year ago

it allowed the view to load without issue. but the function is not being triggered onPress

|

Collectives™ on Stack Overflow

cannot bind functions in react native

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related