How to get value from TextInput using state in 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?

Does this answer your question? [react native get TextInput value](https://stackoverflow.com/questions/32913338/react-native-get-textinput-value) — Shayan, Jun 01 '21 at 07:43
Unfortunately, no. I tried some solutions from there but nothing works for me. — Karol Wiśniewski, Jun 01 '21 at 07:46

Nikhil bhatia · Accepted Answer · 2021-06-01T09:00:08.727

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>
    );
}

edited Jun 01 '21 at 09:00

answered Jun 01 '21 at 08:02

Nikhil bhatia

1,297
1
8
9

When I did this I have this error: TypeError: undefined is not an object (evaluating 'this.props') – Karol Wiśniewski Jun 01 '21 at 08:05
1

change to props.onChangeText instead of this.props.onChangeText – Nikhil bhatia Jun 01 '21 at 08:51
I forgot about this, done. I am so grateful, working with this a lot of hours. – Karol Wiśniewski Jun 01 '21 at 08:55

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

1 Answers1