react native, undefined is not an object (evaluating 'this.state.thing = input') - react-native

Question

I am trying to set the onSubmitEditing function of a TextInput object to a custom function, here is my code:
export default class Component4 extends Component {
constructor(props) {
super(props);
this.state = {thing: 'asdf'};
this.func = this.func.bind(this);
}
func(input){
this.setState({thing: input.target.value});
// I will eventually do more complicated stuff
}
render(){
return (
<View style={{padding: 30}}>
<TextInput placeholder="default" onSubmitEditing={this.func}/>
<Text>{this.state.thing}</Text>
</View>
);
}
}
I would like the content of the TextInput to be passed to the function 'func' so that it can change the state of 'thing'. I realize I can just use an arrow function to achieve this and skip having function entirely however like it says in the comment in func I intend to add more complex behaviour there. Thanks for the help

Answer 1

When you declare your function that way it doesn't have access to this because of scoping. Use es6 fat function to give it access to this. Also use setState function instead of direct assignment
func = (input) => {
this.setState({thing: input});
//more complicated stuff here
};
Also change TextInput to use onChange instead of onSubmitEdit

Answer 2

You have to bind your methods to the constructor. You also need a method/function to handle text changes as well as one to handle collecting a result. edit: I guess now that I understand what you're going for, the button was unnecessary.
export default class Component4 extends Component {
constructor(props) {
super(props);
this.state = {myInput: '', myResult: ''};
this.onChange = this.onChange.bind(this);
this.onPress = this.onPress.bind(this);
}
onChange(input){
this.setState({myInput: input.target.value});
// I will eventually do more complicated stuff
}
onPress() {
this.setState({myInput: '', myResult: this.state.myInput});
}
render(){
return (
<View style={{padding: 30}}>
<TextInput name='myInput' placeholder="default" onChange={this.onChange}/>
<Text>{this.state.myResult}</Text>
<Button onPress={this.onPress} title='Click me!' />
</View>
);
}
}