react native pass function to child component as a prop (this.props.functionName is not a function) - function

Question

I've seen this question a lot of other places too, but for some reason no matter what i do, binding or declaring differently, i keep receiving the same error that _this3.props.toggleProp() is not a function. (In '_this3.props.toggleProp()', '_this3.props.toggleProp is undefined.)
my parent component is:
constructor (props) {
super(props)
this.state = {
selectedTab: 'home',
notificationNumber: -1,
}
this._toggleScreen = this._toggleScreen.bind(this);
this.toggleSchedule = this.toggleSchedule.bind(this);
}
_toggleScreen() {
this.setState({
selectedTab: 'categories',
})
}
render(): React$Element<any> {
function MainContent(props) {
const selectedTab = props.selectedTab;
if (selectedTab === 'home') {
return <Home toggleProp={this._toggleScreen} grain="this one here"/>;
}
if (selectedTab === 'categories') {
return <Categories toggleScreen={this.toggleScreen} />;
}
return <Schedule />;
}
return (
<View style={styles.container}>
<MainContent selectedTab={this.state.selectedTab} style={styles.content}/>
</View>
);
}
}
and the important part of my child component is:
render(): React$Element<any> {
return (
<Icon.Button name="home" backgroundColor="rgba(0,0,0,0)" onPress={()=>{this.props.toggleProp()}}>
</Icon.Button>
i have constructor (props) {
super(props)
at the top. any ideas what's going on?

Answer 1

onPress is not a react SyntheticEvent
https://facebook.github.io/react/docs/events.html
change onPress for onClick and it should work.
here is a codesand with onClick working just fine.
https://codesandbox.io/s/93ZyOWl8

Answer 2

The function in your parent component is _toggleScreen() {}, however you're passing in this.toggleScreen instead of this._toggleScreen into your Categories component. This is part of what is causing the toggleProp() is not a function error.
if (selectedTab === 'categories') {
return <Categories toggleScreen={this._toggleScreen} />;
}
Additionally, you're using toggleProp as the prop in the <Home /> Component, but are using toggleScreen as the prop in your Categories component, so this would also throw a toggleProp is undefined error.
A working render function should look like this:
render(): React$Element<any> {
function MainContent(props) {
const selectedTab = props.selectedTab;
if (selectedTab === 'home') {
return <Home toggleProp={this._toggleScreen} grain="this one here"/>;
}
if (selectedTab === 'categories') {
return <Categories toggleProp={this._toggleScreen} />;
}
return <Schedule />;
}
return (
<View style={styles.container}>
<MainContent selectedTab={this.state.selectedTab} style={styles.content}/>
</View>
);
}

Answer 3

I actually needed to pass the function down two children, I totally forgot that I'm rendering the content in MainContent, so I need to pass the toggleScreen as a prop in the mainContent, then pass this.prop._toggleScreen to the home component then call it in there as a prop again.
handler(e) {
this.setState({
selectedTab: 'categories',
})
}
render(): React$Element<any> {
function MainContent(props) {
const selectedTab = props.selectedTab;
if (selectedTab === 'home') {
return <Home handler={props.handler} grain={props.selectedTab} />;
}
else if (selectedTab === 'categories') {
return <Categories toggleScreen={this.toggleScreen} />;
}
return <Schedule />;
}
return (
<View style={styles.container}>
<MainContent selectedTab={this.state.selectedTab} style={styles.content} handler={this.handler}/>
</View>
);
}
}