title: Updating a div size based on props in react
body: <p>I'm trying to implement a side nav bar like how it is shown on this website</p>
  
  <p><a href="https://adminlte.io/themes/AdminLTE/index2.html" rel="nofollow noreferrer">https://adminlte.io/themes/AdminLTE/index2.html</a></p>
  
  <p>Now I'm trying to basically emulate the expanded nav bar and mini navbar toggle. However, I'm having trouble updating the size of the navbar in react. </p>
  
  <p>Here is my nav bar component</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class SideNavBar extends Component {
  
      render() {
          let sideBarStyle = {
              'height': '100%',
              'backgroundColor': 'lightblue',
              'width': "80px",
              'position': 'absolute',
              'top': '0',
              'left': '0'
            }
          setTimeout(() =&gt; {
              sideBarStyle["width"] = "300px";
          }, 1000)
          return (
              &lt;div style={sideBarStyle}&gt;
                  sidenavbar
              &lt;/div&gt;
          );
      }
  }
  
  export default SideNavBar;
  </code></pre>
  
  <p>I put a set timeout there just because I wanted to quickly test if it was possible to expand the div's width from a click event. 
  But I get the following error </p>
  
  <pre><code>TypeError: Cannot assign to read only property 'width' of object '#&lt;Object&gt;'
  </code></pre>
  
  <p>How do I go about updating an element's size based on click events? </p>