I've been having issues with if statements correctly evaluating, either always showing true or exhibiting strange behavior when passing variables or using state variables to be evaluated. I understand this may be an issue with different objects or the asynchronous nature of setState but I'm not really sure /how/ it works.
Hoping to get help understanding how to get this to evaluate correctly, if any extra code is needed I'll add on but this should hopefully cover all that is needed for this example of my overall form validation.
State
constructor(props)
{
super(props);
this.state =
{
newProfile:
{
name: '',
email: '',
gender: '',
userType: '',
password: ''
},
match: true,
formValid: false,
nameValid: false,
emailValid: false,
genderSelectionValid: false,
userTypeValid: false,
passwordValid: false,
formErrors:
{
name: '',
email: '',
password: '',
gender: '',
userType: ''
},
passwordConfirm: '',
profileOptions: ['Investor', 'Student'],
genderOptions: ['Male','Female','Other'],
first: true
};
this.handleGenderChange = this.handleGenderChange.bind(this);
this.handleNameChange = this.handleNameChange.bind(this);
this.handleEmailChange = this.handleEmailChange.bind(this);
this.handlePasswordChange = this.handlePasswordChange.bind(this);
this.handleSecondPasswordChange = this.handleSecondPasswordChange.bind(this);
this.handleUserTypeChange = this.handleUserTypeChange.bind(this);
this.handleFormSubmission = this.handleFormSubmission.bind(this);
this.validateName = this.validateName.bind(this);
this.validateForm = this.validateForm.bind(this);
}
Form Selection
<Select options = {this.state.genderOptions}
placeholder = {'Select Gender'}
handleChange = {this.handleGenderChange}
title = {'Gender'}
/>
Form Selection jsx
import React from 'react';
const Select = (props) =>
{
return(
<div className='form-group'>
<label> {props.title} </label>
<select
value={props.value}
onChange={props.handleChange}>
required
<option>{props.placeholder}</option>
{props.options.map(field =>
{ return(
<option
key={field}
value={field}
label={field}>{field}
</option>
);
})}
</select>
</div>)
}
export default Select;
Button handler for this example
handleGenderChange(event)
{
console.log(event.target.value);
let value = event.target.value;
let tempProfile = this.state.newProfile;
tempProfile.gender = value;
this.setState({newProfile: tempProfile});
console.log(this.state.newProfile.gender);
this.validateGenderSelection(value);
}
validateGenderSelection
validateGenderSelection(gender)
{
let localFormErrors = this.state.formErrors;
if(gender == "Male" || "Female" || "Other")
{
localFormErrors.gender = "";
this.setState({genderSelectionValid: true});
}
else
{
localFormErrors.gender = "No gender selected.";
this.setState({genderSelectionValid: false});
}
this.setState({formErrors: localFormErrors});
this.validateForm();
}
Overall Form Validation This never sets to true even if all state variables it should evaluate are true
validateForm()
{
if(this.state.nameValid === true && this.state.emailValid === true && this.state.passwordValid === true && this.state.userTypeValid === true && this.state.genderValid === true)
{
this.setState({formValid: true});
}
if(this.state.formValid === false)
{
console.log(this.state.formErrors);
}
console.log(this.state.newProfile.gender);
console.log(this.state.nameValid, this.state.emailValid, this.state.genderSelectionValid, this.state.userTypeValid, this.state.passwordValid, this.state.formValid);
}