How to get value from TextInput using state in react native? - react-native

Question

I am trying to implement TextInput and I stuck in moment when I need to get text from this.
I tried a lot of options from other StackOverflow questions but nothing works for me.
This is my code where I am using TextInput:
export default class HomeScreen extends Component {
constructor(props) {
super(props)
this.state = {
text: ''
};
}
show = () => {
console.log(this.state.text)
}
render() {
return (
<View>
<View style={{backgroundColor: 'purple', height: '100%'}}>
<View>
<Button title={'test'} onPress={this.show}></Button>
<MyTextInput
btn={1}
placeholder={'test'}
isDateTime={false}
onChangeText={(value) => this.setState({text: value})
value={this.state.text} />
</View>
</View>
</View>
)
}
and here is MyTextInput code:
export function MyTextInput(props) {
const [show, setShow] = useState(false);
const btn = props.btn;
const inputType = () => {
if(props.isDateTime) {
setShow(true);
}
else {
setShow(false);
}
}
return (
<View style={btn ? styles.container : styles.container2}>
<TextInput
style={btn ? styles.input : styles.input2}
{...this.props}
placeholder={props.placeholder}
onFocus={inputType}
showSoftInputOnFocus={props.isDateTime ? false : true} />
{show && (
<DTPicker />
)}
</View>
);
}
When I hit the button I get this:
[Info] 06-01 07:24:59.158 6962 7031 I ReactNativeJS:
Where is my mistake or what I should do different?

Answer 1

you need to pass onChangeText={(value) => props.onChangeText(value)} in TextInput
export function MyTextInput(props) {
const [show, setShow] = useState(false);
const btn = props.btn;
const inputType = () => {
if(props.isDateTime) {
setShow(true);
}
else {
setShow(false);
}
}
return (
<View style={btn ? styles.container : styles.container2}>
<TextInput
onChangeText={(value) => props.onChangeText(value)}
style={btn ? styles.input : styles.input2}
{...this.props}
placeholder={props.placeholder}
onFocus={inputType}
showSoftInputOnFocus={props.isDateTime ? false : true} />
{show && (
<DTPicker />
)}
</View>
);
}