title: ReactJS Ref: undefined error getting input element value
body: <p>In the following code I am setting up a <code>ref</code> on the <code>&lt;input/&gt;</code> element which is used during the <code>&lt;form&gt;</code> element's <code>onSubmit</code> handler. </p>
  
  <p>For some reason I am getting the following error when submitting the form:</p>
  
  <blockquote>
    <p>TypeError: Cannot read property 'value' of undefined</p>
  </blockquote>
  
  <p>How can I prevent this error?</p>
  
  <pre><code>import React from "react";
  
  class AddItemForm extends React.Component {
  
    nameRef = React.createRef();
  
    createItem = event =&gt; {
  
      event.preventDefault();
  
      const item = {
        name: this.nameRef.value.value,      
      };  
    }
  
    render() {
      return (
        &lt;form className="item-edit" onSubmit={this.createItem}&gt;
          &lt;input name="name" ref={this.nameRef} type="text" placeholder="Name" /&gt;        
          &lt;button type="submit"&gt;+ Add Item&lt;/button&gt;
        &lt;/form&gt;
      );
    }
  }
  
  export default AddItemForm;
  </code></pre>