React Native TextInput onSubmitEditing firing with every button press

Question

I'm having trouble with onSubmitEditing firing with every button press of my input keyboard AND when the current page first loads (that part is especially puzzling). The TextInput code is as follows:

const TimerInput = () => {
    const [ value, onChangeText ] = React.useState('');
    return (
        <TextInput
            style={{
                backgroundColor: ColorScheme.Orange.e,
                borderRadius: 10,
                borderWidth: 0,
                fontSize: 25,
                height: 60,
                textAlign: 'center',
                shadowColor: 'gray',
                shadowRadius: 10,
                width: '80%',
            }}
            keyboardType = 'number-pad'
            onSubmitEditing = {FormatTime(value)}
            onChangeText = { text => onChangeText(text) }
            placeholder = { ' Hours : Minutes : Seconds ' }
            returnKeyType = 'done'
            value = {value}
        />
    );
}

The FormatTime function simply writes to the console at the moment while I've been trying to figure this out:

FormatTime = () => {
    return (
        console.log('test')
    );
}

The behavior I'm hoping to achieve is for this to run FormatTime only when the "Done" button is pressed to close the input keyboard. I will be completely honest in that I'm not fully certain how the TextInput is working (i.e. I'm so confused about the difference between the "value" and "text"), so I'm probably missing something obvious here. Thanks so much for your help.

Answer 1

Cause with every button-press (and when the page is first-loaded), there's a re-render ... with your code, it executes FormatTime .. .but it supposed to bind FormatTime as a handler for onSubmitEditing event

This way you pass a handler not a function call

 onSubmitEditing = {() => FormatTime(value)}