React Native how to pass the value from component to the main activity without using Redux? - react-native

Question

I am making a upload product for selling .
And I had make a component for receive the input number(units or price) from the user,
and in the main page will need to count the total price : units * price ..
However ,I get stucked here ... I don't know how I am able to get the value from the component ..
I have attached my code . Could you please take a look ? Thank you so much !!
Component for putting number
import React from 'react';
import { StyleSheet, View } from 'react-native'
import { TextInput } from 'react-native-gesture-handler';
import colors from '../config/colors';
function TryInputNum({children}) {
return (
<View style={styles.container}>
<TextInput placeholder="Enter a number">{children}</TextInput>
</View>
);
}
const styles = StyleSheet.create({
container :{
width : 150,
height : 200,
backgroundColor : colors.white,
}
})
export default TryInputNum;
The main page
import React from 'react';
import { StyleSheet, View,Text } from 'react-native'
import TryInputNum from '../components/TryInputNum';
import colors from '../config/colors';
function TryCountScreen({children}) {
return (
<View style={styles.container}>
<Text>{children}</Text>
<TryInputNum/>
</View>
);
}
const styles = StyleSheet.create({
container : {
flex :1,
backgroundColor : colors.primary,
justifyContent : 'center',
alignItems : 'center',
}
})
export default TryCountScreen;

Answer 1

You can pass onChangeText function from the children and access it as a prop inside the main component. In the onChangeText you can return the text value from the TextInput component and handle it inside the main component. It would like like this
function TryInputNum({children,onChangeText}) {
return (
<View style={styles.container}>
<TextInput onChangeText={value => onChangeText(value)} placeholder="Enter a
number">{children}</TextInput>
</View>
);
}
and then deal with the value from the main screen like this
import React from 'react';
import { StyleSheet, View,Text } from 'react-native'
import TryInputNum from '../components/TryInputNum';
import colors from '../config/colors';
function TryCountScreen({children}) {
return (
<View style={styles.container}>
<Text>{children}</Text>
//Here you have access to that text value thats written inside the
// TextInput component
<TryInputNum onChangeText={text => console.log(text)}/>
</View>
);
}
const styles = StyleSheet.create({
container : {
flex :1,
backgroundColor : colors.primary,
justifyContent : 'center',
alignItems : 'center',
}
})
export default TryCountScreen;