displaying input field after clicking button react-native

Question

I am learning react-native and I wanted to do something simple where the user can enter some information like name or something and then when he/she clicks the button, it will display on the screen hello so and so. I have my onChangeText setting the state to what the user passes but it doesn't update. Also clicking the button doesn't show anything. I will paste my code down below. Any help or suggestions.

app.js

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

const instructions = Platform.select({
  ios: "Press Cmd+R to reload,\n" + "Cmd+D or shake for dev menu",
  android:
    "Double tap R on your keyboard to reload,\n" +
    "Shake or press menu button for dev menu"
});

type Props = {};
export default class App extends Component<Props> {
  constructor() {
    super();
    this.state = {
      text: "Hello "
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange = typedText => {
    this.setState({
      text: typedText
    });
    console.log(text);
  };
  render() {
    return (
      <View style={styles.container}>
        <Text>{this.state.value}</Text>
        <Button onPress={this.handleChange} title="Click Me " />
        <TextInput
          placeholder="Type your name here"
          onChangeText={typedText => {
            this.setState({
              text: typedText
            });
          }}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10
  },
  instructions: {
    textAlign: "center",
    color: "#333333",
    marginBottom: 5
  }
});

where is the onhelloFunction function ?

Guruparan Giritharan
– Guruparan Giritharan

2018-11-27 03:52:25 +00:00
Commented Nov 27, 2018 at 3:52 — Guruparan Giritharan
– Guruparan Giritharan, Commented Nov 27, 2018 at 3:52
should of been handleChange. Updated it.

lets0code
– lets0code

2018-11-27 04:01:36 +00:00
Commented Nov 27, 2018 at 4:01 — lets0code
– lets0code, Commented Nov 27, 2018 at 4:01

Guruparan Giritharan · Accepted Answer · 2018-11-27 04:34:47Z

1

You are setting the state in handlechange (the onpress function) as well which is not required at all. There wont be an argument of text in your onPress you are resetting the text value in the state. And the text inside the handleChange will be undefined as you dont set it anywhere.

the code should be something like below.

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      text: "Hello "
    };
    this.handleChange = this.handleChange.bind(this);
  }
  onPress = () => {
    console.log("current ==> ", this.state);
    alert(this.state.text);
  };
  handleChange = typedText => {
    console.log("update => ", typedText);
    this.setState(
      {
        text: typedText
      }
    );
  };
  render() {
    return (
      <View style={styles.container}>
        <Text>{this.state.value}</Text>
        <Button onPress={this.onPress} title="Click Me " />
        <TextInput
          placeholder="Type your name here"
          onChangeText={this.handleChange}
        />
      </View>
    );
  }
}

edited Nov 27, 2018 at 4:34

answered Nov 27, 2018 at 4:14

Guruparan Giritharan

16.4k4 gold badges30 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

lets0code Over a year ago

I dont see any changes happening when button is clicked

Guruparan Giritharan Over a year ago

replace the console.log(this.state.text); with alert(this.state.text);

lets0code Over a year ago

when I type it keeps alerting hello. So every time the state changes it alerts instead of waiting till im done typing and clicking the button

lets0code Over a year ago

Yes this is perfect. The only thing is that I would like to have hello then whatever the user passes. Right now it just shows what the user passes.

Guruparan Giritharan Over a year ago

you could do alert("Hello"+this.state.text);

Leela Venkatesh K · Accepted Answer · 2018-11-27 04:17:23Z

0

The issue was, on Press of button we are calling a function which expects a 'text' but in actual it is an event. Check this codesandbox

answered Nov 27, 2018 at 4:17

Leela Venkatesh K

1,7801 gold badge16 silver badges27 bronze badges

4 Comments

lets0code Over a year ago

Your code doesn't output anything when the button click me is clicked

Leela Venkatesh K Over a year ago

@moegizzle check in console. It shows the current text. When you update the text, that is set to state

lets0code Over a year ago

I am using a iphone emulator?

Leela Venkatesh K Over a year ago

I'm not sure how to check in emulator, as I have not worked in react-native. You can try to see the state or show a popup in the change handler to see that state is being updated.

Collectives™ on Stack Overflow

displaying input field after clicking button react-native

2 Answers 2

5 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related