unable to update parent from child - react-native

Question

The included code is almost running. I'm trying to restart the count where it left off when I toggle the device. I'm getting the following error message:
Warning: Functions are not valid as a React child. This may happen if you
return a Component instead of <Component /> from render. Or maybe you meant
to call this function rather than return it.
here's what I was attempting:
1)pass as this.props.count class App this.state.count (this creates the starting point of the counter
2) pass a callback function from APP to COUNTER that will update APP.state.count (I do this inside of COUNTERS Inc method)
NOTE: it's a little tricky to get ignorewarnings working if you don't have the right dependencies installed. lines 3, 4 and 5 can be deleted
import React from 'react';
import {Button, StyleSheet, Text, View } from 'react-native';
import ignoreWarnings from 'react-native-ignore-warnings';
ignoreWarnings(['Warning: componentWillMount is deprecated',
'Warning: componentWillReceiveProps is deprecated'])
class Count extends React.Component {
shouldComponentUpdate(nextProps,nextState){
if(nextProps.count % 2 === 0)return true
else return true
}
render(){
return(
<Text style={styles.count}>{this.props.count}</Text>
)
}
}
class Counter extends React.Component {
constructor(props){
super(props)
this.state={
count: this.props.count,
}
console.log(this)
}
componentDidMount(){
this.interval=setInterval(this.inc,1000)
}
componentWillUnmount(){
clearInterval(this.interval)
}
inc=()=>{
//console.log(thisate)
this.setState(prevState =>({
count: prevState.count + 1,
}))
this.props.resetCount(this.state.count)
}
render() {
return (
<View>
<Count count={this.state.count}/>
</View>
);
}
}
export default class App extends React.Component {
constructor(){
super()
this.state={
show:true,
count:0,
}
}
toggle=()=> this.setState(prevState => ({
show: !prevState.show
}))
resetCounter(count){
this.setState({count: Count})
}
render(){
console.log(this.state)
if(this.state.show){
return(
<View style={styles.container}>
<Button title='toggle' onPress={this.toggle}/>
<Counter
count={this.state.count}
resetCount={(count)=>{this.resetCounter(count)}} />
</View>
)
}else{
return(
<View style={styles.container}>
<View style={styles.container}>
<Button style={styles.count} title='toggle' onPress={this.toggle}/>
<Text style={styles.count}> </Text>
</View>
</View>
)
}
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'lightgrey',
alignItems: 'center',
justifyContent: 'center',
},
count:{
fontSize:48
}
});

Answer 1

First problem i see, and i think the warning come from here, is you resetCounter function. You pass "Count" (a component) to the state. I think you would like to pass the argument : count. You could do it simply like this so there is not mistake :
resetCounter(count){
this.setState({count})
}
Second thing is your callback way. You should do it like this :
export default class App extends React.Component {
constructor(){
super()
this.resetCounter = this.resetCounter.bind(this);
this.state={
show:true,
count:0,
}
}
resetCounter(count){
this.setState({count: Count})
}
render(){
...
return(
<View style={styles.container}>
<Button title='toggle' onPress={this.toggle}/>
<Counter
count={this.state.count}
resetCount={this.resetCounter} />
</View>
...
)
}
}
It's a lot better for performance and for reading.
Hope it help !

Answer 2

just a typo! yureka.
resetCounter(count){
this.setState({count: Count})
}
needs to be:
resetCounter(count){
this.setState({count: count})
}