update CSS class on button click - Reactjs

Question

I'm trying to obtain a blur effect to my background when a user clicks a certain button. How can i update my css class when a user clicks the button.

This is the current css class i have

.post_options {
    width: 100%;
    height: 100%;
    float: left;
    background-color: #eceff1;
    position: fixed;
}

I want to make it like this make a user clicks the button

.post_options {
    width: 100%;
    height: 100%;
    float: left;
    background-color: #eceff1;
    position: fixed;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}

This is the button that should make my background blur

 <button className="preview_btn" href="#postpreview" onClick={this.preview}>Preview</button>

Note: I'm doing this in react.

I tried giving a separate div with the background effects but what it does is blurring the contents inside too.

Answer 1

Set state in your class:

 this.state = {
    blur: false; 
  }

Create a function to be called when button is clicked. This function changes the state and triggers a re-render

 preview() {
    this.setState = {
      blur:true;
    }
}

Check the state of 'blur' in your button component and add classes accordingly

//Below code adds 'blur' class if the button is clicked
<button className={this.state.blur?'blur':''} onClick={this.preview}>Preview</button>  

Codepen