Question: 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:

```
const myElement = document.getElementById("my-element");

```

or

```
const myElement = document.createElement("div");
function testFunc(element) {
return element.getBoundingClientRect();
}
testFunc(myElement);

```

I have googled a bit but haven't found any good answers, all I could find was about "ref" but I am sure there is a simpler solution.

This is what I have in React now:

```
import React from "react";
import "./myComp.css";

function myComp(props) {
  const sliderContainer = (
    <div className="slider-container" style={props.styles}></div>
  );

  function myFunc(element) {
      return element.getBoundingClientRect();
  }

  const elementDimensions = myFunc(sliderContainer);

  return { sliderContainer };
}

export default myComp;

```

But what i want to do is:

```
import React from "react";
import "./myComp.css";

function myComp(props) {
  const sliderContainer = "slider-container" //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 (
    <div className="slider-container" style={props.styles}>
        <div className="myChild"></div>
    </div>
  );
}

export default myComp;

```

Answer: 
This should work:

```
const sliderContainer = useRef(null);

function myFunc(element) {
  return element.getBoundingClientRect();
}

useEffect(() => {
  const elementDimensions = myFunc(sliderContainer.current);
});

return (
  <div ref={sliderContainer} className="slider-container" style={props.styles}>
      <div className="myChild"></div>
  </div>
);

```

The `ref` property will assign the element to `sliderContainer.current` once the component has been mounted.

Note that the value is initially set to be null: `useRef(null)`.

You must wait until the element is not null before accessing it as the element will not yet be mounted when the component is initially rendered.
You can use `document.getElementById('slider-container');` or any other use of `document` in React.