this.state.text.split() is undefined error when using onSubmitEditing - facebook

Question

According to Facebook's official documentation:
onChangeText takes a function to be called every time the text changes
and
onSubmitEditing takes a function to be called when the text is submitted
I'm following the official Facebook tutorial on text input handling, the code:
export default class PizzaTranslator extends Component {
constructor(props) {
super(props);
this.state = {text: ''};
}
render() {
return (
<View style={{padding: 10}}>
<TextInput
style={{height: 40}}
placeholder="Type here to translate!"
onChangeText={(text) => this.setState({text})}
/>
<Text style={{padding: 10, fontSize: 42}}>
{this.state.text.split(' ').map((word) => word && '🍕').join(' ')}
</Text>
</View>
);
}
}
takes a sentence and change all of its words into 🍕 emojis, but if I change onChangeText to onSubmitEditing, I get an error saying this.state.text.split is not a function. (In 'this.state.text.split('')', 'this.state.text.split' is undefined) when I submit my text.

Answer 1

The documentation is correct on this point, both onChangeText and onSubmitEditing take a callback function to be executed. The essential difference is the argument supplied to the callback function. onChangeText gives the new value as a string and onSubmitEditing executes the callback function with an object as first argument. You can view the result using
<TextInput
onChangeText={(text) => {this.setState({text}); console.warn('text', text);}}
onSubmitEditing={(argument) => console.warn(Object.keys(argument))}
/>