title: In React, can I create a Component that also acts as a Forwarded Ref object?
body: <p>I have a need to use forwarded refs</p>
  
  <pre><code>const InfoBox = React.forwardRef((props, ref) =&gt; (
      &lt;div ref={ref} &gt;
        &lt;Rings &gt;
        &lt;/Rings&gt;
        &lt;Tagline  /&gt;
      &lt;/div&gt;
  ));
  </code></pre>
  
  <p>I also happen already have the code written like this</p>
  
  <pre><code>class InfoBox extends React.Component {
     constructor(props) {
       super(props)
     }
  
  
     render () {
        return (
        &lt;div  &gt;
          &lt;Rings /&gt;
          &lt;Tagline  /&gt;
        &lt;/div&gt;
        )
     }
  </code></pre>
  
  <p>basically my InfoBox needs to be a Component because it holds some state, but I also want it to behave like an object that can receive refs from the parent and forward them down to the children (basically React.forwardRef) </p>
  
  <p>After familiarizing myself with React.forwardRef, I can't figure out how to get it to work with my existing React components, which already have functionality attached to state.</p>
  
  <p>do I need to separate the two objects, and wrap one within the other or is there a way I can achieve this in the same object?</p>
  
  <p>the code that wraps Infobox looks like</p>
  
  <pre><code>class AppContainer extends React.Component {
    constructor(props) {
      super()
  
      this.infobox_ref = React.createRef()
    }
  
    componentDidMount() {
       // this.infobox_ref.current.innerHTML should return the inner HTML of the infobox
    }
  
    render() {
      return (
        &lt;InfoBox ref={this.infobox_ref}&gt; 
      )
    }
  </code></pre>
  
  <p>am I using forwarded refs correctly?</p>