Accessing variables from imported component react native - reactjs

Question

Lets say I have my main component, where if the type of {data} is "textSingles" I render the TextSingle component:
const Information = (props) => {
const data = props.data
return (
<View>
<Text>Information</Text>
{data.type == "textsingle" &
<TextSingle data={data}/>
}
</View>
)}
Here is my TextSingle component":
const TextSingle = (props) => {
const [item, setItem] = useState(props.data)
const [text, setText] = useState('')
return (
<View style={[styles.card, styles.shadowProp]}>
{/* card label */}
<View style={styles.cardHeaderTextContainer}>
<Text style={styles.cardHeaderText}>{item.label}</Text>
</View>
{/* input container */}
<View style={styles.inputContainer}>
<TextInput
style={styles.textInput}
placeholder='Enter Text'
onChangeText={text => setText(text)}
autoCapitalize='none'
placeholderTextColor='#949494'
></TextInput>
</View>
</View>
)
}
Within my Information component I am rendering TextSingle. With in TexSingle I have a text input, and that value sets the "text" var.
In this case I want to send the answer to firebase.
How do I get the value of that text input in Information component?

Answer 1

use can use hook names useimperativehandle for use child functions in parent class. if you don't want to and you can pass function from parent here's it
in your information component
const Information = (props) => {
const data = props.data
const [text, setText] = useState('')
return (
<View>
<Text>Information</Text>
{data.type == "textsingle" &
<TextSingle data={data} onChangeText={text => setText(text)}/>
}
</View>
)}
and in your textsingle
const TextSingle = (props) => {
const [item, setItem] = useState(props.data)
return (
<View style={[styles.card, styles.shadowProp]}>
{/* card label */}
<View style={styles.cardHeaderTextContainer}>
<Text style={styles.cardHeaderText}>{item.label}</Text>
</View>
{/* input container */}
<View style={styles.inputContainer}>
<TextInput
style={styles.textInput}
placeholder='Enter Text'
onChangeText={props.onChangeText}
autoCapitalize='none'
placeholderTextColor='#949494'
></TextInput>
</View>
</View>
)
}