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.
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)
}