title: React change style on function call
body: <p>I have a component like following:</p>
  
  <p>toggleRegistration() {</p>
  
  <pre><code>    this.setState({
          ...this.state,
          showFullSizedImage: true,
          showRegistration: !this.state.showRegistration,
      })
  
  }    
  ...
  &lt;div className="div-one"&gt;
      &lt;If condition={!this.state.showRegistration &amp;&amp; !this.state.showLogin}&gt;
  
          {/* Main registration button */}
          &lt;div className="register-button"&gt;
              &lt;Button
                  backgroundColor="red"
                  value="Get Started"
                  minWidth={220}
                  minHeight={50}
                  fontSize={24}
                  borderRadius={60}
                  onClick={() =&gt; this.toggleRegistration()}&gt;
              &lt;/Button&gt;
          &lt;/div&gt;
      &lt;/If&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Corresponding css:</p>
  
  <pre><code>.div-one {
  
    background: url("../../../assets/images/manhattan-min.png") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  
    position: absolute;
    width: 100%;
    min-height: 500px;
    min-height: 100vh;
  
  }
  </code></pre>
  
  <p>I want to reduce the width of div-one to 50% when user clicks the button i.e. toggleRegistration() method.</p>
  
  <p>How should I do it?</p>