title: How to get a react component to rerender without forceupdate?
body: <p>I'm trying to learn react by building a simple web app where a user can upload an image and apply different effects to them. I hit a bit of a road block. I'm trying to figure out how to rerender the imagecontainer after the user clicks one of the effects. I read about forceupdate but it's not recommended to use. Here my code:</p>
  
  <pre><code>import React, { Component } from 'react';
  
  import ImageContainer from './components/image_container';
  import AppliedContainer from './components/applied_container';
  import UnappliedContainer from './components/unapplied_container';
  
  class App extends Component {
  
  constructor(props) {
      super( props );
      this.state = {
          transform :  false  ,
          rotate : false  ,
          scale : false   ,
          opacity : false 
      }
  
  };
  
  
  render() {
      return (
          &lt;div className="row"&gt;
              &lt;ImageContainer onChange={this.state} /&gt;
              &lt;UnappliedContainer types={this.state} onSelect={ state =&gt; 
       this.setState(state) }/&gt;
              &lt;AppliedContainer types={this.state} onSelect={ state =&gt; 
       this.setState(state) }/&gt;             
          &lt;/div&gt;
      );
  }
  
  }
  
  export default App;
  </code></pre>
  
  <p>Thanks Guys!</p>