How to make validation right?

Question

Need your help. I am trying to validate my TextInput, but my validation error doesn't appear! What have I done wrong? Maybe I have done something wrong in the function? Target function is "isEnoughSymbols". I will be very glad, if you help me.

This is my target component.

import React, { Component } from 'react'
import { View, TextInput } from 'react-native'
import { MyButton, ErrorMessage } from '../uikit'
import { FormStyle, InputStyle } from '../constants/styles'
import { LOG_IN } from '../routes'

export class SignIn extends Component {
    state = {
        symbolsValidation: true
    }

    isEnoughSymbols = (text) => {
        if (text.trim().length < 8)
            this.setState({ symbolsValidation: false })
    }

    render() {
        const { mainContainer, buttons } = FormStyle
        const { container, text } = InputStyle

        return (
            <View style={mainContainer}>

                <View style={container}>
                    <TextInput
                        style={text}
                        placeholder={'Email'}
                    >
                    </TextInput>
                    <ErrorMessage errorText={'Incorrect email format!'} />
                </View>

                <View style={container}>
                    <TextInput
                        style={text}
                        placeholder={'Password'}
                        onEndEditing={(e) => isEnoughSymbols(e.nativeEvent.text)}
                    >
                    </TextInput>
                    {
                        this.state.symbolsValidation ? null : <ErrorMessage errorText={'Password must have at least 8 symbols!'} />
                    }
                </View>

                <View style={container}>
                    <TextInput
                        style={text}
                        placeholder={'Confirm password'}
                    >
                    </TextInput>
                    <ErrorMessage errorText={'Passwords not matching'} />
                </View>

                <View style={buttons}>
                    <MyButton
                        name={'confirm'.toUpperCase()}
                        onPress={() => this.props.navigation.navigate(LOG_IN)} />
                </View>
            </View>
        )
    }
}

Answer 1

Could you add a logging command in the callback in the setData command to confirm that the state is being updated, something like

this.setData({ symbolsValidation: false }, () => console.log("updated state:", this.state.symbolsValidation))