title: Sizing one component by getting the width of another one using useRef hook in React
body: <p>I'm trying to set the width of a component by using the useRef hook in React but I clearly am not grokking the pattern.  The codesandbox can be found here: <a href="https://codesandbox.io/s/vqn5jyv9y5" rel="noreferrer">https://codesandbox.io/s/vqn5jyv9y5</a> .  Thanks!</p>
  
  <pre><code>import React, {useRef} from "react";
  import ReactDOM from "react-dom";
  
  import "./styles.css";
  
  function App() {
    return (
      &lt;div className="App"&gt;
        &lt;h1&gt;Hello CodeSandbox&lt;/h1&gt;
        &lt;h2&gt;Start editing to see some magic happen!&lt;/h2&gt;
        &lt;Foo /&gt;
      &lt;/div&gt;
    );
  }
  
  const Foo = () =&gt; {
    const { current: btn } = useRef(null);
    return (
      &lt;React.Fragment&gt;
        &lt;button ref={btn}&gt;buuuuttttoooon&lt;/button&gt;
        &lt;div style={{ width: btn.style.width, backgroundColor: 'pink', height: '50px' }} /&gt;
      &lt;/React.Fragment&gt;
    )
  }
  
  
  const rootElement = document.getElementById("root");
  ReactDOM.render(&lt;App /&gt;, rootElement);
  </code></pre>