How do I show {state} in an alert from a React-Native component

user_8893093 0
Viewed 6721

I am trying to alert the contents of my TextInput component whilst I am testing. The code is in the handleSubmit() function below (line 22). At the moment, the Alert pops up but all I get is 'Title' whilst this.state.text does not appear. I have tried all kinds of curly braces, brackets etc.

Please could someone let me know what I am doing wrong and how I can access my state in an alert? Will help me for testing in the future. Im a newbie to React Native so grateful for any help on this. Thanks vm!

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

class GBTextInput extends Component {
  constructor(props) {
    super(props);
    const {placeholder, text, label} = props;
    this.state = {
      text,
      placeholder,
      label
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({text});
  }

  handleSubmit(event) {
    Alert.alert(
      'Title'+this.state.text,
      'I am a message'
    );
    event.preventDefault();
  }

  render() {
    const {text, placeholder, label} = this.state;
    const {containerStyle, labelStyle, inputStyle, buttonStyle} = styles;

    return(
      <View>
      <View style={containerStyle}>
        <View style={labelStyle}>
          <Text>{label}</Text>
        </View>
        <TextInput
          placeholder={placeholder}
          style={inputStyle}
          onChangeText={(text) => this.handleChange}
          value={text}
          onSubmitEditing={(text) => this.handleSubmit}
        />
      </View>
      <TouchableOpacity style={buttonStyle} onPress={this.handleSubmit}>
        <Text>PRESS ME</Text>
      </TouchableOpacity>
      </View>

    );

  }
}

const styles= StyleSheet.create ({
  containerStyle: {
    flexDirection: 'row',
    margin: 6
  },
  buttonStyle: {
    alignSelf: 'stretch',
    margin: 6,
    padding: 6,
    height: 40,
    borderRadius: 10,
    alignItems: 'center',
    justifyContent: 'center',
    borderColor: 'blue',
    borderWidth: StyleSheet.hairlineWidth
  },
  labelStyle: {
    height: 40,
    width: '20%',
    alignItems: 'flex-end',
    justifyContent: 'center',
    paddingRight: 6
  },
  inputStyle: {
    height: 40,
    width: '80%',
    borderColor: 'gray',
    borderRadius: 10,
    borderWidth: StyleSheet.hairlineWidth,
    position: 'relative',
    paddingLeft: 6
  },
});

export default GBTextInput;
react-native reactjs alert state textinput
2 Answers

My guess is your problem is here:

handleChange(event) {
  this.setState({text});
}

Should be:

handleChange(text) {
  this.setState({text});
}

You also need to pass the value into the handleChange function:

<TextInput
  placeholder={placeholder}
  style={inputStyle}
  onChangeText={(text) => this.handleChange(text)}
  value={text}
  onSubmitEditing={(text) => this.handleSubmit}
/>

or

<TextInput
  placeholder={placeholder}
  style={inputStyle}
  onChangeText={this.handleChange}
  value={text}
  onSubmitEditing={(text) => this.handleSubmit}
/>

The way it is now... You are setting text to undefined each time they change the text of the input. So long story short... You are correctly trying to print the state value in your alert... You are just not correctly setting the state value so it is always undefined.

user_11199400

This works for me:

alert('Title ' + this.state.text);
user_27865020
Related