setState not working in componentDidMount() - React
<p>I have been having a few problems with using the setState function in componentDidMount().</p>

<p>What I am trying to do: I am trying to make an HTML5 circle responsive (Go bigger if browser window is bigger and vice versa).</p>

<p>What I have done so far: I have been storing the dimensions in state called containerDim. By Default this is set to null. Here is a very basic implementation of what I've done: </p>

<pre><code>class App extends React.Component  {
  constructor(props)  {
    super(props);
    this.state = {containerDim: null};
    this.resizeCircle = this.resizeCircle.bind(this)  //To not loose value of this
  }

  componentDidMount()  {

    var dimensions = window.getComputedStyle(this.refs.responsiveContainer); //Used to get width and height

    this.setState({
      containerDim: {width:dimensions.width, height: dimensions.height}
    });

   window.addEventListener("resize", this.resizeCircle));

  }

 resizeCircle()  {  //THE RESIZING WORKS, THE initial setting of state doesn't
   var dimensions = window.getComputedStyle(this.refs.responsiveContainer); //Used to get width and height

    this.setState({
      containerDim: {width:dimensions.width, height: dimensions.height}
    });

 }



  render()  {
    return (
     &lt;div ref={"responsiveContainer"} &gt;
       &lt;Circle dimensions={this.state.containerDim} /&gt;
     &lt;/div&gt;
    );
  }
} 

//Circle component

class Circle extends React.Component {
  constructor(props)  {
    super(props);
  }

  componentWillReceiveProps()  {

    console.log(this.props.dimensions); //THIS LOGS OUT NULL

  }

  render()  {
    CIRCLE GOES HERE
  }

}
</code></pre>

<p>Basically what I am trying to do with this code is to get the width and height of "responseContainer" and pass it as a prop to the <code>&lt;Circle /&gt;</code> component. </p>

<p>The above does not work as the setState does not change the state whatsoever.</p>

<p>Any help would be greatly appreciated!</p>

<p>EDIT: </p>

<p>This "Works" but I feel that it is not correct and there should be a better way: </p>

<pre><code> var dimensions = window.getComputedStyle(this.refs.container);

  setTimeout(function()  {


  this.setState({
    screenDim:{width:dimensions.width, height:dimensions.height}
  });
}.bind(this),0);

this.setState({
  screenDim:{width:dimensions.width, height:dimensions.height}
});
</code></pre>