how to get state from child component - react-native

Question

I need to get the state of the number from the component Numberplus
And display in the App component
app component:
import React from "react";
import { Text, View } from "react-native";
import Numberplus from "./Number";
function App() {
return (
<View>
<Text>{/* How to get Numberplus component State here */ Number}</Text>
<Numberplus />
</View>
);
}
export default App;
Numberplus component:
import { Button, Text, View } from "react-native";
function Numberplus() {
let [Number, setNamber] = useState(0);
return (
<View>
{/*<Text>{Number}</Text>*/}
<Button
onPress={() => {
setNamber(++Number);
}}
title="Plus"
/>
</View>
);
}
export default Numberplus;
See more details and display the output result

Answer 1

You can solve this problem either using redux or holding the state in your parent component. I can not explain whole redux here but here is how you can manage it with state.
App.js
import React from "react";
import { Text, View } from "react-native";
import Numberplus from "./Number";
function App() {
let [Number, setNumber] = useState(0);
return (
<View>
<Text>{/* How to get Numberplus component State here */ Number}</Text>
<Numberplus number={Number} onPress={() => {
setNumber(++Number);
}} />
</View>
);
}
export default App;
NumberPlus.js
import { Button, Text, View } from "react-native";
function Numberplus() {
return (
<View>
{/*<Text>{this.props.number}</Text>*/}
<Button
onPress={this.props.onPress}
title="Plus"
/>
</View>
);
}
export default Numberplus;