title: How to create an element and use its ref to append child elements in react?
body: <p>I'm trying to create a html element on a parent component on react and access that component div inside a child component, then I can append new elements in the div from the child component.</p>
  
  <p>After many attempts I wasn't able to fix props.canvasDivElement.current = null on the child constructor.</p>
  
  <p>I've tried to do this using REF and without refs... No luck so far.</p>
  
  <p>Any ideas?</p>
  
  <p>The parent component looks like:</p>
  
  <pre><code>import React from "react";
  import ReactViewer from "../ReactViewer/ReactViewer";
  
  export default class CanvasWrapper extends React.Component {
      private _divElement: React.RefObject&lt;HTMLDivElement&gt;;
  
      constructor(props: any) {
          super(props);
          this._divElement = React.createRef&lt;HTMLDivElement&gt;();
      }
  
      render() {
          return (
              &lt;div&gt;
                  &lt;ReactViewer canvasDivElement={this._divElement}&gt;&lt;/ReactViewer&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>The child component:</p>
  
  <pre><code>import React from "react";
  
  type ReactViewerState = {
  };
  
  type ReactViewerProps = {
      canvasDivElement: React.RefObject&lt;HTMLDivElement&gt;;
  
  };
  
      export default class ReactViewer extends React.Component&lt;ReactViewerProps, ReactViewerState&gt; {
          constructor(props: ReactViewerProps, state: ReactViewerState) {
              super(props, state);
              const newElement = document.createElement('span');
              newElement.innerText = 'element';
              props.canvasDivElement.current!.appendChild(newElement); //current is null
          }
  
          render() {
              return (
                  &lt;div ref={this.props.canvasDivElement} /&gt;
              );
          }
      }
  </code></pre>