CODEWITHSUNDEEP
javascriptreactjs
alopez02
alopez02

Reputation: 1524

Executing two functions (passed in props) sequentially in React

I have two React class components. Component1 is the parent of Component2 and I have two functions (functionA and B) that are passed in props from Component1 to Component2. Nested in Component2 I have a function, saveAndNotify(), that is supposed to execute functionA and then functionB only when functionA has finished executing completely.

For more context, functionA changes a state in Component1 and functionB takes that state to perform other functions.

See in code of Component2 below

export default class Component2 extends React.Component {
  static.propTypes = {
    functionA: PropTypes.func,
    functionB: PropTypes.func
  }


  render() {//some code
    return(//some code)
  }
  
  saveAndNotify = (my_arguments) => {
    this.props.functionA(func_a_args);
    this.props.functionB(func_b_args); // this needs to execute after functionA has 
    finished
  }

}

I'm new to JS and have read about using callbacks but I haven't been able to do this sequentially. Especially since I'm not getting how to access the react class Component with the keyword this when I'm nesting functions while using callbacks.

I'd appreciate your guidance.

Upvotes: 0

Views: 67

Answers (1)

Soufiane Boutahlil
Soufiane Boutahlil

Reputation: 2604

You don't need a callback. Passing 2 props will make things harder to maintain, the best thing is to pass one function we can call it functionC that will use functionA and functionB, the functionA will update the state and will return it to be used by functionB.

Component2:

export default class Component2 extends React.Component {
  static.propTypes = {
    functionC: PropTypes.func,
  }


  render() {//some code
    return(//some code)
  }
  
  saveAndNotify = (my_arguments) => {
    this.props.functionC(my_arguments)
  }

}

functionC of Component1:

functionC(my_arguments)) {
  const state = this.functionA()
  this.functionB(state)
}

Upvotes: 1

Related Questions