CODEWITHSUNDEEP
javascriptreactjsreact-nativemobile
user12169861
user12169861

Reputation:

React Native Getting this.state.input stored as Undefined Work fined in React Native Web

React Native Getting this.state.input stored as undefined Works fined in React Native Web

I have been a react dev for a while wanted to build a simple to do app with react native with some networking components got stuck trying to figure out why this.state.input is being stored as an undefined primitive value new to react native i thing my react knowledge might be my clouding my perspective

Also the https post request with axios works fine but keeps getting stored as undefined

BTW i searched stackoverflow for a solution tried every vague solution i could find so this is unlikely to be a duplicate question

Don't know if it is a lifecycle issue or a binding issue or a react-native api issue cant't seem to figure it out

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

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      messages: '',
    };
    this.handleChange = this.handleChange.bind(this);
    this.sendMessage = this.sendMessage.bind(this);
  }

  handleChange(event) {
    this.setState({
      input: event.target.value,
    });
  }
  sendMessage() {
    const sendIt = `${this.state.input}`;// this.state.input RETRIEVED AND STORED AS UNDEFINED
    const todol = {
      todo: `${sendIt}`,
    };

    console.log(sendIt); // GETTING UNDEFINED HERE WORKS FINE WITH REACT NATIVE WEB

    axios
      .post('http://10.120.1.190:7000/todos/add', todol)
      .then(res => {
        this.setState({messages: JSON.stringify(res.data)});
        console.log(this.state.messages);
      })
      .catch(err => console.log(`${err}`));
    this.setState({
      input: '',
    });
  }

  render() {
    return (
      <View>
        <Text style={styles.old}>Type in a new Message:</Text>
        <TextInput
          style={styles.old}
          value={this.state.input}
          onChange={this.handleChange}
        />
        <Button title="Submit" onPress={this.sendMessage}></Button>
        <Text>{this.state.messages}</Text>
      </View>
    );
  }
}
// Change code above this line

const styles = StyleSheet.create({
  old: {
    fontFamily: 'Helvetica',
    fontSize: 15,
    lineHeight: 30,
    margin: 'auto',
  },

  new: {
    fontFamily: 'Lato',
    fontSize: 25,
    lineHeight: 30,
    margin: 'auto',
  },
});

export default App;

Upvotes: 0

Views: 144

Answers (2)

SuleymanSah
SuleymanSah

Reputation: 17888

We generally use onChangeText to handle text input changes in react-native.

Your TextInput must be like this:

<TextInput
    style={styles.old}
    value={this.state.input}
    onChangeText={text =>
      this.setState({
        input: text
      })
    }
/>

Upvotes: 1

gpatarin
gpatarin

Reputation: 29

According to the documentation

onChange

Callback that is called when the text input's text changes.

This will be called with { nativeEvent: { eventCount, target, text} }

You should use : event.text but, you can also use onChangeText as it will provide the text directly.

Upvotes: 0

Related Questions