setState not working as expected in the form validations

Solution 1:

setState() does not always immediately update the component. It may batch or defer the update until later. This makes reading this.state right after calling setState() a potential pitfall.

https://reactjs.org/docs/react-component.html#setstate

Reading the state immediately after setting it will not guarantee the results you expect. Refactor to a local variable and set the state only once at the end of the function:

handleOnSubmit = () => {
    const hasError = false;
    const { providerMappingActions: { addProvider }, history } = this.props;
    const { inputs } = this.state;

    inputs.forEach(input => {
        if (input.isRequired && input.attributeValue.length === 0) {
            hasError = true;
        }
        if (input.attributeOptionId == 5 && input.attributeValue.length !== 0) {
            if (input.attributeValue.length !== 10) {
                hasError = true;
            }

        }
    })

    if (!hasError) {
        const attributes = inputs.map(input => {
            return {
                attributeName: input.attributeName,
                attributeValue: input.attributeValue,
                isRequired: input.isRequired,
                attributeOptionId: input.attributeOptionId,
            }
        });
        console.log(attributes)
        this.resetInputs();
    }

    // Set the state only once at the end of the function, this will
    // cause a re-render if the value changes.
    this.setState({ hasError });
}