Reactjs state is not updating, when used as second param in setState callback

SimpleFields component:

import React, { Component } from 'react';

class SimpleFields extends Component {
    shouldDisplayError({ show_error }) {
        return show_error ? 'validation-error': 'validation-error hidden';
    }

    render() {
        return (
            <div className="signup-form-simple-fields">
                <div className="controls-row space-between">
                    <div className="form-element first-name">
                        <input
                            type="text"
                            placeholder="First Name"
                            value={this.props.fields.first_name.value}
                            name="first_name"
                            onChange={this.props.handleChange}
                        />
                        <div
                            className={this.shouldDisplayError(this.props.fields.first_name)}
                        >{this.props.fields.first_name.error_message}</div>
                    </div>
                    <div className="form-element last-name">
                        <input
                            type="text"
                            placeholder="Last Name"
                            value={this.props.fields.last_name.value}
                            name="last_name"
                            onChange={this.props.handleChange}
                        />
                        <div
                            className={this.shouldDisplayError(this.props.fields.last_name)}
                        >{this.props.fields.last_name.error_message}</div>
                    </div>
                </div>
            </div>
        );
    }
}

export default SimpleFields;

SignupForm component:

import React, { Component } from 'react';
import moment               from 'moment';
import SimpleFields         from './SimpleFields';
import './SignUpForm.css';

class SignUpForm extends Component {
    constructor() {
        super();

        this.handleOnSubmit             = this.handleOnSubmit.bind(this);
        this.handleSimpleFieldsChange   = this.handleSimpleFieldsChange.bind(this);
        this.handleBirthDayFieldsChange = this.handleBirthDayFieldsChange.bind(this);
        const current_date              = moment().format('MM/DD/YYYY');

        this.state = {
            first_name : {
                value         : '',
                error_message : 'First Name field must be filled out.',
                show_error    : false,
                id            : 'first_name',
            },
            last_name : {
                value         : '',
                error_message : 'Last Name field must be filled out.',
                show_error    : false,
                id            : 'last_name',
            },
            isValidating     : false,
            failedValidation : false,
        }
    }

    handleSimpleFieldsChange({ target }) {
        // Create patch object
        const patch = {value : target.value, show_error: false};

        this.setState(state => ({
            // Update state for specific object
            [target.name] : {...state[target.name], ...patch},

            // Indicate validation is not taking place as the form has not been submitted
            isValidating  : false,
        }));
    }

    handleBirthDayFieldsChange(change) {
        this.setState(state => ({
            birthday : {
                ...state.birthday,
                ...change,
            }
        }));
    }

    handleOnSubmit(e) {
        e.preventDefault();

        this.setState({
            // Indicate validation is taking place, pass in callback
            isValidating : true,
        }, this.validateFields());
    }

    validateFields() {
        // Validate simple fields
        this.validateSimpleFields();

        // Update state indicating that validation is no longer happening
        this.setState({
            isValidating :false,
        });
    }

    validateSimpleFields() {
        let failedValidation = false;
        const objects        = {};

        // Check all fields and patch objects indicating which ones have errors, if there is no value
        [
            this.state.first_name,
            this.state.last_name,
        ].forEach(field => {
            if(!field.value.trim()) {
                objects[field.id] = {...field, show_error: true};
            }
        });

        // If objects var is empty this means everything is good to go
        failedValidation = !!Object.keys(objects).length;

        // Update state, indicating if there are any errors
        this.setState({
            ...objects,
            failedValidation,
        });
    }

    isValidating() {
        return this.state.isValidating ? 'loader' : `loader hidden`;
    }

    render() {
        return (
            <form className="signup-form" onSubmit={this.handleOnSubmit}>
                <div className="signup-form-header">
                    <h1>Signup</h1>
                    <p>It's quick and easy</p>
                </div>
                <div className="signup-form-main">
                    <SimpleFields
                        fields={this.state}
                        handleChange={this.handleSimpleFieldsChange}
                    />
                    <div className="controls-row center-aligned">
                        <div className="form-element">
                            <button>Sign Up!</button>
                        </div>
                    </div>
                    <div className="controls-row center-aligned">
                        <div className={this.isValidating()}>Checking fields...</div>
                    </div>
                </div>
            </form>
        );
    }
}

export default SignUpForm;

When I enter in all the fields, as required, the div that has the text “Checking fields…” is still displayed, even though I have set “isValidating” to false in the function “validateFields”. I checked the react dev tools, and “isValidating” is set to true. The function “validateFields” is used as a callback to setState in the function handleSubmit. I can’t figure out what is setting it to true. Any help would be appreciated.

enter image description here

Answer

Change isValidating() to

isValidating =()=>{
//Code
}

Or bind this in constructor like other methods.

Also

this.setState({ // Indicate validation is taking place, pass in callback isValidating : true, }, this.validateFields);

(The callback needs to be passed without braces(i.e you should not call)