Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 138249

Evaulating if-statements in React using State

$
0
0

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

Viewing all articles
Browse latest Browse all 138249

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>