How to call function inside function in React native-CodePudding

how to call one function inside another function? here both function are members of same class in react native

i want to call a one function inside a another function but it's show 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>
   )
  }
}

in here there is button in CODPayBtn() function and if this button click than i want to call PayNow() function but it's show me error that undefined is not a function

please solve my question

CodePudding user response：

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.

CodePudding user response：

Bind your functions like this:

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

    };

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

CodePudding user response：

Try this:

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