onPress error "is not a function" and "is undefined"

Question

Taking my first baby steps towards learning Rect Native, and have been stuck with these errors for a while. When i click item:

I get these errors:

Here is my React Native code:

import React, { Component } from 'react';
import {
  AppRegistry,
  Text,
  View,
  ListView,
  StyleSheet,
  TouchableHighlight
} from 'react-native';

export default class Component5 extends Component {
  constructor(){
    super();
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      userDataSource: ds
    };
    this._onPress = this._onPress.bind(this);
  }

  _onPress(user){
    console.log(user);
  }

  renderRow(user, sectionId, rowId, hightlightRow){
    return(
      <TouchableHighlight onPress={() => {this._onPress(user)}}>
        <View style={styles.row}>
          <Text style={styles.rowText}>{user.name}: {user.email}</Text>
        </View>
      </TouchableHighlight>
    )
  }

  fetchUsers(){
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((response) => response.json())
      .then((response) => {
        this.setState({
          userDataSource: this.state.userDataSource.cloneWithRows(response)
        });
      });
  }

  componentDidMount(){
    this.fetchUsers();
  }

  render() {
    return (
      <ListView
        style={styles.listView}
        dataSource={this.state.userDataSource}
        renderRow={this.renderRow.bind()}
      />
    );
  }
}

const styles = StyleSheet.create({
  listView: {
    marginTop: 40
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'center',
    padding: 10,
    backgroundColor: 'blue',
    marginBottom: 3
  },
  rowText: {
    flex: 1,
    color: 'white'
  }
})

AppRegistry.registerComponent('Component5', () => Component5);

Very grateful for any input!

Your code seems to work without errors when inserting in this playground: https://snack.expo.io/SJa7iflQZ — Andru, Jun 15 '17 at 14:36

score 3 · Accepted Answer · answered Jun 15 '17 at 15:02

3

Rookie mistake - forgot to bind renderRow correctly in the component. I wrote:

renderRow={this.renderRow.bind()}

and it should of course be:

renderRow={this.renderRow.bind(this)}

answered Jun 15 '17 at 15:02

fransBernhard

362
2
7
24

Andru · Answer 2 · 2017-06-15T14:44:29.097

1

You are trying to bind this at many different places, but e.g. in renderRow={this.renderRow.bind()} bind nothing. You're also using the arrow-function syntax sometimes..

I'd recommend you to use the arrow-function syntax for your class methods so that you don't have to bind this anymore (it's a feature of the arrow-style function syntax), i.e.

Delete this._onPress = this._onPress.bind(this);
Rewrite _onPress to _onPress = user => console.log(user);
Call it via <TouchableHighlight onPress={() => this._onPress(user)}>

You can do this with all other class methods and never have to use .bind(this) again.

edited Jun 15 '17 at 14:44

answered Jun 15 '17 at 14:31

Andru

5,954
3
39
56

Thank you for answer! But I get syntaxError Unexpected Token when I do all the steps above .. @Anduru – fransBernhard Jun 15 '17 at 14:41
@fransBernhard Sorry, get rid of the `const` in step 2. Corrected my answer. – Andru Jun 15 '17 at 14:45
Still the same errors "_this2._onPress is not a function. (In '_this2._onPress(user', '_this2._onPress' is undefined" :( @Andru – fransBernhard Jun 15 '17 at 14:52
Weird.. did you try the RN playground example in the link I posted as a comment to your question above? There no such error is thrown. So perhaps try to restart your packager. Not sure what's going on.. – Andru Jun 15 '17 at 14:53
1

I played around in that playground now and found the error. Typical first timers stupid error (..) - but I shall learn! – fransBernhard Jun 15 '17 at 14:59

onPress error "is not a function" and "is undefined"

2 Answers2