title: How to assign a prop value to a state in react
body: <p>I have an overlay which is launched from another React component which have a button that also changes itself. The change happens when the user clicks the button, then the button changes it's classname. It also sends a prop value to the children component which is the overlay. The overlay adds a class depending on the property and if it is clicked. Everthing is working pretty nice, but now I have to do another thing. When a user click on the overlay, it have to close up. Before this change, everything was working for the button I mentioned earlier.</p>
  
  <p>Well this is the button component:</p>
  
  <pre><code>export default class StatusBarButton extends React.Component {
  
      constructor(props) {
          super(props)
          this.state = {active: false}
          this.handleClick = this.handleClick.bind(this)
      }
  
      handleClick() {
          this.setState({ active: !this.state.active });
      }
  
      render() {
          var cx = require('classnames');
          var button = cx ({
              'statusbar-button-container' : true,
              'active' : this.state.active
          });
          var animation = cx ({
              'statusbar-button-cross-image' : true,
              'rotate' : true,
              'active' : this.state.active
          });
  
          return (
              &lt;div className="astatusbar-center-wrapper"&gt;
                  &lt;div className={button} onClick={this.handleClick}&gt;
                      &lt;img src="images/navbar-element-icon-cross.png" className={animation}/&gt;
                  &lt;/div&gt;      
                  &lt;OverlayView isOpen={this.state.active} /&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>And this is the Overlay at the moment:</p>
  
  <pre><code>export default class OverlayView extends React.Component {
      constructor (props){
          super(props);
          this.state = {open: false}
          this.setState({ open: this.props.isOpen });
      }
  
  
  
      render() {
          var cx = require('classnames');
          var overlay = cx({
              'overlay': true,
              'overlay-slidedown': true,
              'open': this.state.open
          });
  
          return (    
              &lt;div className={overlay} onClick={this._closeOverlay}&gt;
                  &lt;div className="overlay-menu-wrapper"&gt;
                      &lt;OverlayNewInvoiceButton /&gt;
                      &lt;OverlayNewBudgetButton /&gt;
                      &lt;OverlayNewTicketButton /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>As you see I'm trying to get the prop value and assign it to the state, but it's not working. How can I assign the prop value to the state and use it?</p>
  
  <p>Regards,
  JP</p>