title: Add component to useRef object
body: <p>How would you add a component inside an useRef object (which is refering to a DOM element)?</p>
  <pre><code>const Red = () =&gt; {
    return &lt;div className=&quot;color&quot;&gt;Red&lt;/div&gt;;
  };
  
  const Black = () =&gt; {
    return &lt;div className=&quot;color&quot;&gt;Black&lt;/div&gt;;
  };
  const Green = () =&gt; {
    return &lt;div className=&quot;color&quot;&gt;Green&lt;/div&gt;;
  };
  
  const Button = (params) =&gt; {
    const clickHandler = () =&gt; {
      let boolA = Math.random() &gt; 0.5;
  
      if (boolA) {
        params.containerRef.current.appendChild(&lt;Red /&gt;);
      } else {
        let boolB = Math.random() &gt; 0.5;
  
        if (boolB) {
          params.containerRef.current.appendChild(&lt;Black /&gt;);
        } else {
          params.containerRef.current.appendChild(&lt;Green /&gt;);
        }
      }
  
    };
  
    return &lt;button onClick={clickHandler}&gt;Click&lt;/button&gt;;
  };
  
  export default function App() {
    const containerRef = useRef(null);
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;Button containerRef={containerRef} /&gt;
  
        &lt;div ref={containerRef} className=&quot;color-container&quot;&gt;
          Color components should be placed here !
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p><strong>params.containerRef.current.appendChild();</strong> -&gt; throws an error. I`ve put it to show what I would like to happen.</p>
  <p>Also is what I`m doing an anti-pattern/stupid ? Is there another (smarter) way of achieving the above ?</p>
  <p><a href="https://codesandbox.io/s/add-child-to-use-ref-5041z?file=/src/App.js" rel="nofollow noreferrer">codesandbox link</a></p>
  <p>edit :
  I forgot some important information to add.
  Only <strong>Button</strong> knows and can decide what component will be added.</p>