Grandchild component not changing grandparent state - reactjs

Question

There is a button 2 layers deep in a NavigatorIOS that when triggered, should change the TabBarIOS selected TabBarIOS Item.
The components are structured as follows:
--FooterTabs
------NavigatorIOS:List -> ListItem
I am attempting to do the above by having a function inside FooterTabs that changes the state, and having TabBar.Items whose prop 'selected' becomes true when the state's 'selectedTab'=== different strings.
Like so:
_changeToAlarms(){
console.log('Hello from Footer Tabs');
this.setState({
selectedTab: 'Alarms'
});
}
render(){
return(
<Icon.TabBarItemIOS title={'Alarms'}
iconName='ios-clock'
selected={this.state.selectedTab === 'Alarms'}
onPress={()=> {
this.setState({
selectedTab: 'Alarms'
});
}}>
<ComingSoon/>
</Icon.TabBarItemIOS>
<Icon.TabBarItemIOS title={'Schedules'}
iconName='ios-moon'
selected={this.state.selectedTab === 'Schedules'}
onPress={()=> {
this.setState({
selectedTab: 'Schedules'
});
}}>
</Icon.TabBarItemIOS>
);
}
*Icon.TabBatItem acts exactly like TabBarIOS.Item.
onPress works, but to be able to change the tab in a similar fashion (by modifying the component's state) I passed _changeToAlarms() as a prop to 'SleepSchedules'.
<Icon.TabBarItemIOS ...
>
<NavigatorIOS
initialRoute={{
component: SleepSchedules ,
title: ' ',
passProps: {changeToAlarms: ()=> this._changeToAlarms()}
}}
style={{flex: 1}}
/>
</Icon.TabBarItemIOS>
And from SleepSchedules, I am navigating to the next component and passing the previous'changeToAlarms' as a prop.
_handlePress(selectedSchedule){
this.setState({selectedSchedule});
this._navScheduleItem(selectedSchedule)
}
_navScheduleItem(scheduleName){
this.props.navigator.push({
title: `${scheduleName} Sleep`,
component: ScheduleItem,
passProps: {scheduleName}, changeToAlarms: ()=> this.props.changeToAlarms
})
}
render(){
return(
...
onPress={()=> this._handlePress('Monophasic')}>
);
}
And in ScheduleItem I am attempting to call the prop 'changeToAlarm' that was passed, which should be the one from Footer Tabs.
_handleTouch(){
console.log('Hello from Schedule Item');
this.props.changeToAlarms;
}
render(){
return(
...
onPress={()=> this._handleTouch()}
);
}
The console logs 'Hello from ScheduleItem' every time I press it, but doesn't log 'Hello from FooterTabs' nor does it change the tab.
Does anyone spot an error?
I am a beginner, so thank you much for your help! :)

Answer 1

You need a () after this.props.changeToAlarms. this.props.changeToAlarms()

Answer 2

I think there might be a better approach but without seeing more code its hard to get the full picture of whats going on. On thing that did catch my eye was in your _handlePress function. You called setState and then another function.
According to ReactDocs:
There is no guarantee of synchronous operation of calls to setState
and calls may be batched for performance gains.
This might be causing an issue for you, again without more code its hard to tell. You can try using the overload method for setState that takes a function as the second arg.
setState(nextState, callback)
Performs a shallow merge of nextState into current state. This is the primary > method you use to trigger UI updates from event handlers and server request > > callbacks.
The first argument can be an object (containing zero or more keys to
update) or a function (of state and props) that returns an object
containing keys to update.
This ensures your setstate completes before your next function is executed.
_handlePress(selectedSchedule){
this.setState({selectedSchedule}, () =>
{
this._navScheduleItem(selectedSchedule);
});
}