title: How to Get: Component Width After Render in React
body: <p>I'm trying to create a general purpose component, that I can reuse in other applications. I need to know the width of the component after render so that I can modify the content of the component.</p>
  
  <p>I've been trying to use the different life cycles in react without success.</p>
  
  <pre><code>componentDidUpdate() {
    console.log('width', this.element.offsetWidth);
  }
  
  render() {
    return (
      &lt;div ref={(element) =&gt; {this.element = element }} /&gt;
    );
  }
  </code></pre>
  
  <p>When I try this I get the width of the screen, but if I change the size of the window, I get the width of the component. See the Chrome Log:</p>
  
  <p><a href="https://i.stack.imgur.com/GwwW0.png" rel="noreferrer"><img src="https://i.stack.imgur.com/GwwW0.png" alt="Chrome log"></a></p>
  
  <p>ComponentDidMount executes before render so <code>this.element</code> is <code>undefined</code>.</p>
  
  <p>I've also attempted to use different libraries from npm to solve this without luck.</p>
  
  <p><strong>Futher information:</strong> The component has to work inside a Bootstrap column, at different widths.</p>
  
  <pre><code>render() {
    &lt;Row&gt;
      &lt;Col sm={3} /&gt;
        &lt;MyComponent /&gt;
      &lt;/Col&gt;
      &lt;Col sm={9} /&gt;
        &lt;MyComponent /&gt;
      &lt;/Col&gt;
    &lt;Row&gt;
  }
  </code></pre>
  
  <p><strong>Clarification</strong> I do not want to resize the window, and I apologize for not being clear. The only reason for me to mention the resizing is that when the DOM has been created and I resize, I get the correct value in <code>offsetWidth</code>. I'm looking for a solution where I get the correct value without resizing. Either a post render function call, listeners, some react magic, or other solutions. My problem is my lack of knowledge with the virtual vs. real DOM.</p>