title: How to access the DOM element of the child component in Preact with hooks?
body: <p>I am using Preact with hooks. I have following button component:</p>
  
  <pre><code>export function Button(props) {
      return (
          &lt;button class={props.class}&gt;{props.children}&lt;/button&gt;
      );
  }
  </code></pre>
  
  <p>I have another parent component where I need to access actual DOM element button for animation purpose.</p>
  
  <pre><code>export function Parent(props) {
      const buttonElm = useRef(null);
  
      useEffect(() =&gt; {
  
          console.log(buttonElm.current);
  
          // Animate button using popmotion or similar
      });
  
      return (
          &lt;div&gt;
              &lt;Button ref={buttonElm}&gt;Click me to animate&lt;/Button&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>However, there is a problem. The <code>buttonElm.current</code> points to JSX object i.e. <code>Button</code> but not the DOM element <code>button</code>. I need <code>buttonElm</code> to point to actual DOM element. <strong>How do I do that?</strong></p>
  
  <blockquote>
    <p><em>Should I go ahead and use <code>buttonElm.current.base</code> property? But that does not feel idiomatic with hooks.</em></p>
  </blockquote>
  
  <p>Also, I have two questions.</p>
  
  <ol>
  <li>How does <code>ref</code> behave when I am setting it on a Preact component that returns multiple elements using <code>&lt;Fragment /&gt;</code>.</li>
  <li>Second, is accessing the children's DOM element for animation purpose acceptable/correct practice in Preact/React? <em>(I can wrap my component in another wrapper <code>div</code> but that causes more animation headaches than solving the problem)</em></li>
  </ol>