How to call function in a function on react-native?

Question

Hi this is my first time developing apps in javascript and react-native, its kind of a noob question. How do I call _getData function in __onRegionChangeComplete function? I tried this._getData() it shows

error: undefined is not a function(evaluation'this._getData()')').

var React = require('react-native');

var {
  StyleSheet,
  Text,
  View,
  Image,
  MapView,
  Component,
} = React;

class Map extends Component {
  render() {
    return (
      <View style={styles.container}>
        <MapView style={styles.map} 
          showsUserLocation={true}
          onRegionChangeComplete={this._onRegionChangeComplete}
        />
      </View>
    );
  }

  _onRegionChangeComplete(region)
  {

  }

  _getData()
  {

  }
}

var styles = StyleSheet.create({
  container:{
    flex: 1
  },
  map: {
    flex: 1,
  },
  image: {
    width: 64,
    height: 64
  }
});

module.exports = Map;

MZaragoza · Accepted Answer · 2017-08-02 19:22:56Z

8

Let me show you an example, and hope it helps you.

1.Of course, you can use ES5 feature(createClass) instead of ES6(extends class) method to solve this binding problem.

2.You can keep using ES6, just be careful with binding this. For example in my component

_func1(){
    ...
}

_func2(){
  this._func1()
}

if I want to call _func1() in func2, 'this' is binded to _func2 itself, of course, there is no func1() there.

But if I bind _func2() to component context when I call _func2(), problem will be solved.

<subComponent subProp = {this._func2.bind(this)} />

Hope it helps you.

edited Aug 2, 2017 at 19:22

MZaragoza

10.1k9 gold badges76 silver badges117 bronze badges

answered Aug 2, 2017 at 18:55

jjgg8899

811 silver badge1 bronze badge

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

Comments

phongyewtong · Accepted Answer · 2015-09-01 15:53:00Z

2

Solve it by changing the extends Component to createclass and adding commas after each function. read a brief introduction about them is that createclass have autobinding for function and extends component does not do that for you, so you have to bind them yourself.

var React = require('react-native');

var {
  StyleSheet,
  Text,
  View,
  Image,
  MapView,
  Component,
} = React;

var Map = React.createClass({
  render(){
    return (
      <View style={styles.container}>
        <MapView style={styles.map} 
          showsUserLocation={true}
          rotateEnabled={false}
          onRegionChangeComplete={this.onRegionChangeComplete}
        />
      </View>
    );
  },

  onRegionChangeComplete(region) {
    this.getData(region)
  },

  getData(region) {

  },
});

var styles = StyleSheet.create({
  container:{
    flex: 1
  },
  map: {
    flex: 1,
  },
  image: {
    width: 64,
    height: 64
  }
});

module.exports = Map;

answered Sep 1, 2015 at 15:53

phongyewtong

5,33915 gold badges60 silver badges87 bronze badges

3 Comments

Shuhari Over a year ago

can anyone update this with the "new" way (ES6, see comment above) please? I have the same issue but don't want to fall back to something "wrong"

Sound Blaster Over a year ago

I think using extends is better and compatible with standards, see more toddmotto.com/react-create-class-versus-component

Adam Patterson Over a year ago

Svetter, I believe the original problem was that the this in 'this._getData() was referring to the scope inside the function. You can solve this by placing const that = this; out side of the function, then using that._getData() instead.

Vidhyapathi Kandhasamy · Accepted Answer · 2018-02-13 09:53:43Z

2

This example sure helpful

export default class Setup extends Component {
  _onPressButton() {
    Alert.alert('You tapped the button!')
  }

  render() {
    return (
      <View style={styles.container}>
      <View>
        <Text h1>Login</Text>
        </View>
        <View>
        <Button
          onPress={this._onPressButton}
          title="Learn More"
          color="#841584"
          accessibilityLabel="Learn more about this purple button"
        />
        </View>
      </View>
    );
  }
}

answered Feb 13, 2018 at 9:53

Vidhyapathi Kandhasamy

2115 silver badges2 bronze badges

Comments

Hoosh · Accepted Answer · 2015-09-01 15:15:26Z

0

One grammar note you should address that might be causing errors: add a comma after the close brace for every method in the class. Try that and edit your post to see if any errors. (Sorry I'd put this in a comment but don't have enough reputation!)

answered Sep 1, 2015 at 15:15

Hoosh

1637 bronze badges

Comments

Gibo · Accepted Answer · 2019-06-27 15:04:51Z

You have to use the ES6 way of doing a function or it will not work, specially for higher version such as 0.59. The code below should work, when calling functions within class. You have got it right for calling the function by using this._onRegionChangeComplete,

  constructor(props) { 
  super(props); 
  this.state = {sliderValue: 15,}
  }

  var Map = React.createClass({
     render(){
     return (
     <View style={styles.container}>
        <MapView style={styles.map} 
         showsUserLocation={true}
         rotateEnabled={false}
         onRegionChangeComplete={this._onRegionChangeComplete}
    />
  </View>
    );
 },
  _onRegionChangeComplete=()=>
    {
        //Your code here. you can use this.variable if you want to use variables from 
        //your constructor(props) { super(props); this.state = {sliderValue: 15,} }

       //Example passing variable
       let Myvalue = this.state.sliderValue;

     }

Collectives™ on Stack Overflow

How to call function in a function on react-native?

5 Answers 5

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related