ReactJS: State variable not updating as expected - reactjs

Question

So I'm learning react and as a practise exercise, I made a basic add user app. The data should only be inserted in case in both input fields are valid. The problem is even if validations fails, the app still enters the data into the field. I'm not sure why because I have explicitly added the condition:
const onSubmit = (event) => {
event.preventDefault();
validateUser(newUser);
if (!showModal.display) {
console.log(showModal.display);
props.onAddingNewUser(newUser);
setNewUser({
username: "",
age: "",
});
}
};
Here is the link to sandbox for my app: https://codesandbox.io/s/beautiful-wilbur-j35mmi
Try clicking submit button without entering any data and you'll see it still populated the list.
I'm still learning React so it would be great if someone can elaborate what I'm doing wrong here.
Thanks!

Answer 1

the reason for that is every time you close the error box you convert display to false again, so no matter what in the end the if statmet:
validateUser(newUser);
if (!showModal.display){
...more code
}
will always be true because even if the user is not valid when you close the error box display will be false again and the if statement will run.
if you want a way around you can return false or true from the validateUser there are more ways to solve this, this is just one way.

Answer 2

Alternatively, you can check for validation before submitting a new user. Here is example below.
if(user.username !== "") and if(user.username) essentially same thing if statement will evaluate as true. Also you don't need to pass newUser from params you can access directly from your state.
const validateUser = () => {
let bool = true;
if (newUser.username && newUser.age && !isNaN(parseInt(newUser.age))) {
setShowModal({
display: false,
text: "",
});
} else {
bool = false;
console.log("Both are empty");
setShowModal({
display: true,
text: "Please enter a valid username and age (non-empty values).",
});
}
if (!newUser.username) {
bool = false;
// Username is empty
console.log("Username is empty");
setShowModal({
display: true,
text: "Please enter a valid age (> 0).",
});
}
if (!newUser.age) {
// Age is empty
bool = false;
console.log("Age is empty");
setShowModal({
display: true,
text: "Please enter a valid username (non-empty values).",
});
}
console.log("Validation End:", showModal);
return bool;
};
const onSubmit = (event) => {
event.preventDefault();
if (!showModal.display && validateUser()) {
console.log(showModal.display);
props.onAddingNewUser(newUser);
setNewUser({
username: "",
age: "",
});
}
};