title: How to get an input value using "refs" in react-bootstrap form?
body: <p>I'm trying to create a form that appears in modal. So when user input a value, that value is stored in local storage. Here's a picture that help's you to understand what I mean:<br>
  <a href="https://i.stack.imgur.com/XK0jv.png" rel="noreferrer"><img src="https://i.stack.imgur.com/XK0jv.png" alt="enter image description here"></a>
  Here is the code of the form:  </p>
  
  <pre><code>function FieldGroup({id, label, help, ...props}) {
      return (
          &lt;ReactBootstrap.FormGroup controlId={id}&gt;
              &lt;ReactBootstrap.ControlLabel&gt;{label}&lt;/ReactBootstrap.ControlLabel&gt;
              &lt;ReactBootstrap.FormControl {...props} /&gt;
              {help &amp;&amp; &lt;ReactBootstrap.HelpBlock&gt;{help}&lt;/ReactBootstrap.HelpBlock&gt;}
          &lt;/ReactBootstrap.FormGroup&gt;
      );
  }
  
  const formInstance = (
      &lt;form&gt;
          &lt;FieldGroup
              id="formControlsText"
              type="text"
              label="Text"
              placeholder="Recipe Name"
              inputRef={ref =&gt; { this.input = ref; }}
          /&gt;
          &lt;ReactBootstrap.FormGroup controlId="formControlsTextarea"&gt;
              &lt;ReactBootstrap.ControlLabel&gt;Ingredients&lt;/ReactBootstrap.ControlLabel&gt;
              &lt;ReactBootstrap.FormControl componentClass="textarea" placeholder="Enter Ingredients" /&gt;
          &lt;/ReactBootstrap.FormGroup&gt;
      &lt;/form&gt;
  );  
  </code></pre>
  
  <p>As I've read in bootstrap React tutorial, I should add<br>
  <code>&lt;FormControl inputRef={ref =&gt; { this.input = ref; }} /&gt;</code>  to the FormControl props. But after adding it I get an error when modal form is invoked:    </p>
  
  <p>`<a href="https://i.stack.imgur.com/mBzwC.png" rel="noreferrer"><img src="https://i.stack.imgur.com/mBzwC.png" alt="enter image description here"></a></p>