title: How to instantiate ref after passing to prop
body: <p>The code below pass jsx from parent to child;
  The problem is that the reference <code>row.descBox</code> is undefined, maybe due to jsx in <code>parent.js</code> is not yet run;
  how should I make it point to the <code>span</code> element?</p>
  <p>This is Parent.js</p>
  <pre><code>import { useEffect, useRef, useState } from &quot;react&quot;;
  import &quot;./styles.css&quot;;
  import Child from &quot;./Child&quot;;
  
  export default function Parent() {
    const taskRefs = useRef([]);
    const [cellContent, setCellContent] = useState([]);
  
    useEffect(() =&gt; {
      const cellContent = [
        {
          content: (
            &lt;&gt;
              &lt;h1&gt;
                &lt;span
                  ref={(el) =&gt; {
                    taskRefs.current[0] = el;
                  }}
                &gt;
                  inside span
                &lt;/span&gt;
              &lt;/h1&gt;
            &lt;/&gt;
          ),
          descBox: taskRefs.current[0]
        }
      ];
  
      setCellContent(cellContent);
    }, []);
  
    return &lt;Child cellContent={cellContent} /&gt;;
  }
  </code></pre>
  <p>This is Child.js</p>
  <pre><code>import { useEffect, useState } from &quot;react&quot;;
  import &quot;./styles.css&quot;;
  
  export const Child = ({ cellContent }) =&gt; {
    return (
      &lt;div className=&quot;App&quot;&gt;
        {cellContent.map((row, i) =&gt; {
          {
            console.log(row.descBox);//this is null!
            return &lt;div key={i}&gt;{row.content}&lt;/div&gt;;
          }
        })}
      &lt;/div&gt;
    );
  };
  
  export default Child;
  </code></pre>
  <p>Try the code at <a href="https://codesandbox.io/s/nice-booth-pwp62x?file=/src/Parent.js:0-698" rel="nofollow noreferrer">codesandbox</a></p>