title: How do I reference an element that is to be returned by a React component?
body: <p>I want to start out by telling you that I am new to react and I come from a background of working almost entirely with vanilla JS and HTML.
  I want to know how to reference/pass an element as an argument in a function similar to how you would go about it in JS:</p>
  <pre><code>const myElement = document.getElementById(&quot;my-element&quot;);
  </code></pre>
  <p>or</p>
  <pre><code>const myElement = document.createElement(&quot;div&quot;);
  function testFunc(element) {
  return element.getBoundingClientRect();
  }
  testFunc(myElement);
  </code></pre>
  <p>I have googled a bit but haven't found any good answers, all I could find was about &quot;ref&quot; but I am sure there is a simpler solution.</p>
  <p>This is what I have in React now:</p>
  <pre><code>import React from &quot;react&quot;;
  import &quot;./myComp.css&quot;;
  
  function myComp(props) {
    const sliderContainer = (
      &lt;div className=&quot;slider-container&quot; style={props.styles}&gt;&lt;/div&gt;
    );
  
    function myFunc(element) {
        return element.getBoundingClientRect();
    }
  
    const elementDimensions = myFunc(sliderContainer);
  
    return { sliderContainer };
  }
  
  export default myComp;
  </code></pre>
  <p>But what i want to do is:</p>
  <pre><code>import React from &quot;react&quot;;
  import &quot;./myComp.css&quot;;
  
  function myComp(props) {
    const sliderContainer = &quot;slider-container&quot; //SOME SORT OF REFRENCE / SELECTOR, I'VE FIGURED OUT THAT querySelectors IS NOT THE RIGHT APPORACH
  
    function myFunc(element) {
        return element.getBoundingClientRect();
    }
  
    const elementDimensions = myFunc(sliderContainer);
  
    return (
      &lt;div className=&quot;slider-container&quot; style={props.styles}&gt;
          &lt;div className=&quot;myChild&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  export default myComp;
  </code></pre>