Pass state value as props react native - react-native

Question

I am trying to make a reusable text input component, but I want to grab the value that the user types to manipulate it on the App.js
TextInputComponent.js
import React, {useState} from 'react';
import { StyleSheet, View, TextInput } from 'react-native'
const TextInputComponent = (props) => {
const [text, onChangeText] = useState("")
return (
<View>
<TextInput style={styles.container} value={text} onChangeText={onChangeText} placeholder="Enter"/>
</View>
)
}
const styles = StyleSheet.create({
container: {
height: 50,
width: 200,
padding: 10,
margin: 10,
borderWidth: 1,
borderColor: "black",
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
export default TextInputComponent
App.js
import { StatusBar } from 'expo-status-bar';
import React, {useState} from 'react';
import { Button, StyleSheet, Text, TextInput, View } from 'react-native';
import TextInputComponent from './src/components/TextInputComponent';
export default function App() {
return (
<View style={styles.container}>
<View style={{flexDirection: 'row' }}>
<Text>Test</Text>
<TextInputComponent/>
<Button title="A" onPress={()=> console.log(-------> text value from TextInputComponent <-----)}></Button>
</View>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
In order to access the state value created on the TextInputComponent.js what do I need to do?

Answer 1

One thing you can do is to pass a custom method through to the component and then use it as the onChangeText method:
const TextInputComponent = ({ customMethod }) => {
const [text, onChangeText] = useState("")
return (
<View>
<TextInput style={styles.container} value={text} onChangeText={(txt) => customMethod(txt)} placeholder="Enter"/>
</View>
)
}
Then in App.js you have the method:
customMethod = (txt) => {
// do something with txt variable
}
and:
<TextInputComponent customMethod={customMethod} />
Might require some tweaking to get it to work (I didn't test it), but that's the general idea.