Why it takes two presses to do what i want? React Native

Question

I have an input which passes its value to a useState on its parent. That value gets passed to other component (Custom button) . There the input data gets validated and returns to the parent in another useState if there's an error and where ("e" = error in email, "p" = error in password, "ep" = error in email and password) Then the border color of the input is set accordingly to that response, if there is an error it turns red, otherwise it turns white.

But it only works the second time i press the button (With which everything is supposed to start)

HELP!😣

const LoginScreen = () => {
    const [email, setemail] = useState('');
    const [password, setpassword] = useState('');
    const [error, seterror] = useState('');

    return (
        <View style={styles.container}>

                    <Input
                        placeholder={"Correo :"}
                        setInputValue={value => setemail(value)}
                        color={
                            error.includes("e") ? '#FA8072' : 'white'
                        }
                    />
                    <Input
                        placeholder={"Contraseña :"}
                        setInputValue={value => setpassword(value)}
                        color={
                            error.includes("p") ? '#FA8072' : 'white'
                        }
                    />
                  
                    <LoginButton data={{email: email, password: password}} setValue={value => {seterror(value)}}/>

        </View>
    )
}

=========================================

Input component

const Input = (props) => {
    return (
        <View style={styles.container}>
            <Text style={styles.placeholder}>{props.placeholder}</Text>
            <TextInput
                style={[styles.input, {borderColor: props.color}]}
                onChangeText={(value) => props.setInputValue(value)}
            />
        </View>
    )
}

=========================================

Button component

const LoginButton = (props) => {
    const [inputError, setinputError] = useState('')

    let validateData = () => {
        if(!props.data.email && !props.data.password){
            setinputError('ep')
        }
        else if(!props.data.email){
            setinputError('e')
        }
        else if(!props.data.password){
            setinputError('p')
        }
        else {
            setinputError('')
        }
    }

    return (
        <TouchableOpacity style={styles.mainButton} onPress={() => {validateData(); props.setValue(inputError)}}>
            <Text style={styles.mainButtonText}>Iniciar sesión</Text>
        </TouchableOpacity>
    )
}

Answer 1

Because you're trying to change state twice. Actually you don't need use state to pass value at LoginButton component. Try direct call instead.

const LoginButton = (props) => {

    let validateData = () => {
        if(!props.data.email && !props.data.password){
            props.setValue("ep");
        }
        else if(!props.data.email){
            props.setValue('e');
        }
        else if(!props.data.password){
            props.setValue('p');
        }
        else {
            props.setValue('');
        }
    }

    return (
        <TouchableOpacity style={styles.mainButton} onPress={() => validateData()}>
            <Text style={styles.mainButtonText}>Iniciar sesión</Text>
        </TouchableOpacity>
    )
}