title: How do I show {state} in an alert from a React-Native component
body: <p>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. </p>
  
  <p>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!</p>
  
  <pre><code>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(
        &lt;View&gt;
        &lt;View style={containerStyle}&gt;
          &lt;View style={labelStyle}&gt;
            &lt;Text&gt;{label}&lt;/Text&gt;
          &lt;/View&gt;
          &lt;TextInput
            placeholder={placeholder}
            style={inputStyle}
            onChangeText={(text) =&gt; this.handleChange}
            value={text}
            onSubmitEditing={(text) =&gt; this.handleSubmit}
          /&gt;
        &lt;/View&gt;
        &lt;TouchableOpacity style={buttonStyle} onPress={this.handleSubmit}&gt;
          &lt;Text&gt;PRESS ME&lt;/Text&gt;
        &lt;/TouchableOpacity&gt;
        &lt;/View&gt;
  
      );
  
    }
  }
  
  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;
  </code></pre>