title: Keep getting an error "undefined is not an object (evaluating '_this.refs.name.value')"
body: <p>I'm doing the ReactNative mobile app. WebApp runs smoothly and everything works. But when I transfer everything to the mobile part, I'm stuck with an error when I enter the text in input field. What I'm doing wrong and what is my mistake? Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import { StyleSheet, TextInput, View } from 'react-native';
  
  export default class App extends React.Component {
  
    state={
      message:"Hi {name}, your rating for this app is {rating}"
    }
  
      handleName=()=&gt;{
        this.setState({
          message:"Hi "+this.refs.name.value+", your rating for this app is {rating}"
        })
      }
  
      handleRating=()=&gt;{
        this.setState({
          message:"Hi "+this.refs.name.value+", your rating for this app is "+this.refs.rating.value
        })
      }
  
    render() {
      return (
        &lt;View style={styles.container}&gt;
          &lt;TextInput
            placeholder="Your Name"
            ref="name"
            onChangeText={this.handleName}
          /&gt;
          &lt;TextInput
            placeholder="Your Rating"
            ref="rating"
            onChangeText={this.handleRating}
          /&gt;
          &lt;View&gt;{this.state.message}&lt;/View&gt;
        &lt;/View&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
  });</code></pre>
  </div>
  </div>
  </p>