How to call function inside another function in React native

Question

How to call one function inside another function? Here, both functions are members of same class in react native.

I want to call a one function inside a another function but it's showing me error like undefined is not a function

How can i solve this?

Here my code is:

 export default class placeOrder extends React.Component{ constructor(props) { super(props); this.state = { }; } PayNow(payM){ console.log(payM); } CODPayBtn(props) { let total = props.total; let temp = props.temp; let charge = props.charge; if(total == temp) { if(total-charge > 299) { return( <> <Button mode="contained" style={{padding:8,backgroundColor:'green',margin:8}} onPress={() => {this.PayNow('COD')}}> Cash on Delivery ( ₹{total} ) </Button> </>); } else { } } else { } } render(){ return( <SafeAreaView> <ScrollView> <View> <this.CODPayBtn total={this.state.total} temp={this.state.temp} charge={this.state.charge}/> </View> </ScrollView> </SafeAreaView> ) } }

There is a button in CODPayBtn() function and if this button is clicked then I want to call PayNow() function but it's giving an error that undefined is not a function .

Answer 1

You need to bind this to your class functions.

constructor( props ){
    super( props );
    this.PayNow = this.PayNow.bind(this);
    this.CODPayBtn = this.CODPayBtn.bind(this);
  }

Or, better, use arrow functions to not have to deal with all that.

CODPayBtn = (props) => {
     let total = props.total;
     let temp = props.temp;
     let charge = props.charge;
     if(total == temp)
     { 
        if(total-charge > 299)
        {
        return(
            <>
            <Button mode="contained" style={{padding:8,backgroundColor:'green',margin:8}} onPress={() => {this.PayNow('COD')}}>
            Cash on Delivery ( ₹{total} )
           </Button>
            
              </>);
          }
          else
          {
              
          }
      }
      else
      {
       
      }

  }

This happens because of how this works in js. When a function is defined as function (){..} , it loses its implicit this and it is set to undefined in classes. That's why we have to manually bind this to the function. Or use arrow functions that don't have this issue.

Answer 2

Bind your functions like this:

constructor(props) {
    super(props);
    this.state = {

    };

    this.PayNow = this.PayNow.bind(this);
    this.CODPayBtn = this.CODPayBtn.bind(this);
}

Answer 3

Try this:

<View>
      {this.CODPayBtn(props)}      
</View>