How to get the width of a react element

Question

Im trying to create a range input that displays a tooltip right above the slider thumb.

I went through some vanilla JS examples online and it seems that I need to have the width of the element to acomplish that.

So I was just wondering how to get the elements width?

Pretty much the equivalent of the JQuery method $(element).width()

Answer 1

    class MyComponent extends Component {       constructor(props){         super(props)         this.myInput = React.createRef()       }        componentDidMount () {         console.log(this.myInput.current.offsetWidth)       }        render () {         return (         // new way - as of [email protected]         <div ref={this.myInput}>some elem</div>         // legacy way         // <div ref={(ref) => this.myInput = ref}>some elem</div>         )       }     } 

Answer 2

With hooks:

const MyComponent = () => {   const ref = useRef(null);   useEffect(() => {     console.log('width', ref.current ? ref.current.offsetWidth : 0);   }, [ref.current]);   return <div ref={ref}>Hello</div>; };