Why is setState is not working as expected - reactjs

Question

For some reason my setState isn't updating...My callback isn't even firing off. I tried defining the function onSubmit() as just onSubmit() instead of onSubmit = () =>. Any ideas? And yes I have verified that my if (milestoneBtnLabel === "Create") is executing.
constructor(props) {
super(props);
this.state = {
campus: []
};
this.onSubmit = this.onSubmit.bind(this);
}
onSubmit = e => {
const { milestoneBtnLabel, schoolData } = this.props;
e.preventDefault();
if (milestoneBtnLabel === "Create") {
this.setState(
{
campus: this.state.campus.concat(schoolData.schoolData.name)
},
() => {
console.log("here"); <-- Doesn't execute
this.props.saveChecklistItem({ ...this.state });
}
);
}
this.props.closeModal();
};

Answer 1

Maybe this.props.closeModal(); removes the component from DOM before setState() completes. Try moving that call to setState callback.
if (milestoneBtnLabel === "Create") {
this.setState(
{
campus: this.state.campus.concat(schoolData.schoolData.name)
},
() => {
console.log("here"); <-- Doesn't execute
this.props.saveChecklistItem({ ...this.state });
this.props.closeModal();
}
);
else {
this.props.closeModal();
}

Answer 2

There are couple of things in your code that needs correction
No need for manual binding when the function is declared as arrow function
Never recommend mutating an array using concate instead use previous state to push new values into array
Also you need to find a better way to close the model like making it wait for 2 seconds and then close the model. Because JavaScript execution will be in parellel so you need to make your dialog wait for previous actions to be completed. You need to think about closing the modal always whenever submit button is triggered but not just when it is only milestoneBtnLabel == "Create"
Change
onSubmit = e => {
const { milestoneBtnLabel, schoolData } = this.props;
e.preventDefault();
if (milestoneBtnLabel === "Create") {
this.setState(
{
campus: this.state.campus.concat(schoolData.schoolData.name)
},
() => {
console.log("here"); <-- Doesn't execute
this.props.saveChecklistItem({ ...this.state });
}
);
}
this.props.closeModal();
}
To
onSubmit = e => {
const { milestoneBtnLabel, schoolData, closeModal, saveChecklistItem} = this.props;
e.preventDefault();
if (milestoneBtnLabel === "Create" && schoolData && schoolData.schoolData){
this.setState( prevState => (
{
campus: [...prevState.campus, schoolData.schoolData.name]
}),
() => {
console.log("here"); <-- Doesn't execute
saveChecklistItem({ ...this.state });
}
);
}
setTimeout(()=>{
closeModal();
}, 2000);
}