title: How can I get the value of a React-Bootstrap Form Control?
body: <p>I have this React Bootstrap class and I have do idea how to catch its value when button is clicked? How to see this in <a href="https://react-bootstrap.github.io/" rel="noreferrer">documentation</a>?</p>
  
  <p>Spent a lot of time... </p>
  
  <p>this is my code with warning in console <em>Warning: React does not recognize the <code>inputRef</code> prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase <code>inputref</code> instead. If you accidentally passed it from a parent component, remove it from the DOM element.</em>:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Button, Form } from 'react-bootstrap';
  import '../../styles/feedback-send.css';
  
  class FeedbackSend extends Component {
    constructor(props) {
      super(props);
      this.inputNode = '';
    }
  
    onSubmit() {
      const data = this.inputNode.value;
      console.log(data);
    }
  
    render() {
      return (
        &lt;Form.Group className="m-0"&gt;
          &lt;Form.Control
            className="textFeedback"
            as="textarea"
            rows="3"
            placeholder="feedback"
            inputRef={(node) =&gt; { this.inputNode = node; }}
            type="text"
          /&gt;
          &lt;Button
            className="btnFormSend"
            variant="outline-success"
            onClick={this.onSubmit}
          &gt;
            Send Feedback
          &lt;/Button&gt;
        &lt;/Form.Group&gt;
      );
    }
  }
  
  export default FeedbackSend;
  </code></pre>