Cannot read property onSubmit of undefined - reactjs

Question

Trying to pass down a function as a prop:
import {
...
} from "react-native";
import {
...
} from "../actions/events";
import { isLoading, isLoadingCredentials, hasErrored } from "../actions/loader";
class HomeScreen extends React.PureComponent {
static navigationOptions = {
title: "",
headerMode: "screen",
header: null
};
constructor(props) {
super(props);
}
componentWillMount() {
const {
navigation: { navigate },
setCredentials
} = this.props;
}
onSubmit(e) {
...
}
render() {
const {
...
} = this.props;
if (!authenticated) {
return <Login onPress={this.onAuthenticate} />;
}
return (
<View
style={styles.container}
onLayout={this.onLayout.bind(this)}
>
<Pickers
onSubmit={this.onSubmit}
/>
</View>
);
}
}
const mapStateToProps = state => {
return {
categories: state.fetchCategories,
isLoading: state.isLoading,
hasErrored: state.hasErrored,
credentials: state.setCredentials,
isLoadingCredentials: state.isLoadingCredentials,
authenticated: state.authenticated
};
};
const mapDispatchToProps = {
....
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(HomeScreen);
Child:
import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import Picker from "./common/Picker";
import {
..
} from "react-native";
import {
...
} from "../actions/events";
export class Pickers extends React.PureComponent {
constructor(props) {
super(props);
}
render() {
const {
credentials: { year, group, student, showStudent }
} = this.props;
return (
<View>
<TouchableHighlight
onClick={() => this.props.onSubmit()}
>
<Text style={styles.buttonText}> Submit</Text>
</TouchableHighlight>
</View>
);
}
}
const mapStateToProps = state => {
return {
credentials: state.setCredentials
};
};
const mapDispatchToProps = {
...
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(Pickers);
What am I doing wrong?

Answer 1

Change it to:
render() {
const { onSubmit } = this.props;
return <TouchableHighlight
onClick={this.props.onSubmit}
/>
}
Your onSubmit method is being passed from the Props not on the class.
So it is undefined.
Hence You need to call this.props.onSubmit while submitting.
It will call the function which is passed as the prop from your Parent Component.
And yeah now you should switch to the ES6 syntax.
class HomeScreen extends React.PureComponent {
static navigationOptions = {
title: "",
headerMode: "screen",
header: null
};
constructor(props) {
super(props);
}
onSubmit= (e) => {
...
}
render(){
<Pickers onSubmit={this.onSubmit}/>}