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.
in React you can use

```
document.getElementById('id-object');

```

or

```
document.querySelector('object-class');

```

But you can find more info in this [article](https://medium.com/the-clever-dev/using-queryselector-and-queryselectorall-with-modern-javascript-frameworks-a20b462c1d3b) on Medium.

Hope that this was useful!