In React Why Does Calling a Function from Another Function in Our Code Not Work and Display

React - How do you call a function from inside another function

Are you looking for something like this calling one function inside the other

import React, { Component } from 'react';import './App.css'
class App extends Component {  constructor(){    super()    this.mouseClick = this.mouseClick.bind(this);    this.primaryFun = this.primaryFun.bind(this);    this.secondaryFun = this.secondaryFun.bind(this);  }
  primaryFun(){    console.log('primaryFun funn')   }
  secondaryFun(){    console.log('secondaryFun funn')     this.primaryFun()  }
  mouseClick(){    this.secondaryFun()  }
  render() {    return (      <div onClick={this.mouseClick}>         Hello World!      </div>    );  }}export default App;

React: Can't call prop function when it is inside of another function?

bind does not call your function:

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called. docs

Also, you are setting the value of onClick prop to the return value of login. If you want to pass a reference to the function, you have to do it without the ().

Your code should look like this:

<button className="btn" onClick={() => this.login()}>test</button> <!-- You need to keep a reference to `this`, hence the binding -->

Then:

login() {
   this.props.route.auth.login();
}

I edited the answer so that it uses an arrow function. However, I prefer not doing that, since it makes the code a bit cumbersome, and rather bind all the functions in the constructor, like @patrick-w-mcmahon did.

How to call function inside another function in React native

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.

React call function from another function in a loop

It's because of how you define the anonymous function in .each()

For this to be bound inside the function, you need to declare it as an "arrow" function i.e. (index, value) => { ... } instead of function(index, value) { ... }:

this.isValidated(null);  //works fine here
$("#resource-manager [id]").each((index, value) => {
    if(this.isValidated(value)) { // this is bound inside the function now

    }
});

This blog post explains how arrow functions behave.

Calling a function from another in ReactJs

You must bind your custom functions in the constructor.
Modify your constructor like this.

constructor(props) {
  super(props);
  this.state = {
    articles: null
  }
 this.handleClick = this.handleClick.bind(this);
 this.loadArticle = this.loadArticle.bind(this);
}

Now everywhere you should call this function as this.handleClick & this.loadMore.

You can read about other binding patterns here. The one I've mentioned is number 4.

That is the preferred way in facebook docs as well.

React Hooks state not working properly when the function calling it is called in another function

Because changeH2() overwrites h1 property by doing ...text.

The 2 setText() calls are executed before a re-render - I believe it's due to batching as explained in https://overreacted.io/react-as-a-ui-runtime/#batching

A solution would be to use a simple state instead of an object:

  const [h1, setH1] = useState("hello");
  const [h2, setH2] = useState("hi");
  ...

Or else useReducer for more complex operations https://reactjs.org/docs/hooks-reference.html#usereducer