Retrieving data from an input field

Question

I just started learning react-native and I have a problem with my input fields. I do not have any compilation errors but when I execute and I press the button I have an error:

Undefined is not an object ('this.state.username')

This is probably linked to poor state management.

Here is my code:

    import React, { Component } from 'react';
    import {
      Platform,
      StyleSheet,
      Text,
      View,
      TextInput,
      Button
    } from 'react-native';


    export default class App extends Component<Props> {
      constructor(props) {
        super(props);
        this.state = {
          username: '',
          password: ''
        };
      };
      _userSignup() {
        const username = this.state.username;
        const password = this.state.password;
      }
      render() {
        return (
          <TextInput
            onChangeText={(text) => this.setState({username:text})}
            value={this.state.username}
            placeholder = "Username"
          />
          <TextInput
            onChangeText={(password) => this.setState({password})}
            value={this.state.password}
            placeholder = "Password"
          />
          <Button
            title="sign in"
            onPress={this._userSignup}
          />
          </View>
        );
      }
    }

Thank you for your help.

anatoli · Answer 1 · 2018-02-09T16:30:53.987

0

You either do this

_userSignup() {
  const { username } = this.state;
  const { password } = this.state;
}

or do this

_userSignup() {
  const username = this.state.username;
  const password = this.state.password;
}

Learn more about ES6 destructuring feature or check out what Dan has to say about it.

edited Feb 09 '18 at 16:30

answered Feb 09 '18 at 16:18

anatoli

336
6
14

Well, this is the solution actually... Do one of them, not both of them combined. – anatoli Feb 09 '18 at 16:28
Does const must be declared? – takesuma Feb 09 '18 at 16:29
No, it's the curly braces. If you use them, you're selecting a property from an object. In your code you're selecting username property from the username, which won't work if it's a string as we see... – anatoli Feb 09 '18 at 16:35
which curly braces do you speak? – takesuma Feb 09 '18 at 16:39
The ones that you deleted in revision #2 https://stackoverflow.com/posts/48709742/revisions – anatoli Feb 09 '18 at 16:46

Retrieving data from an input field

1 Answers1