title: Add class to specific element in React onClick
body: <p>I use react-slick carousel with custom controls. I want to add 'active' class only to element that is changes the slide (by onClick event). But in my case 'active' class toggles for all of them. </p>
  
  <pre><code>export default class ServicesSlider extends React.Component {
      constructor(props) {
          super(props)
          this.changeSlide = this.changeSlide.bind(this)
          this.state = {
              isActive: false
          }
      }
      changeSlide(e) {
          this.setState({
              isActive: !this.state.isActive
          });
          this.slider.slickGoTo(e);
      }
      render() {
          return (
              &lt;div&gt;
                  &lt;section className="carousel-controls"&gt;
                      &lt;div
                          onClick={() =&gt; this.changeSlide(0)}
                          className={this.state.isActive
                          ? 'column' : 'column active'}&gt;Slide one
                      &lt;/div&gt;
                      &lt;div
                          onClick={() =&gt; this.changeSlide(1)}
                          className={this.state.isActive
                          ? 'column' : 'column active'}&gt;Slide two
                      &lt;/div&gt;
                      &lt;div
                          onClick={() =&gt; this.changeSlide(2)}
                          className={this.state.isActive
                          ? 'column' : 'column active'}&gt;Slide three
                      &lt;/div&gt;
                      &lt;div
                          onClick={() =&gt; this.changeSlide(3)}
                          className={this.state.isActive
                          ? 'column' : 'column active'}&gt;Slide four
                      &lt;/div&gt;
                  &lt;/section&gt;
                  &lt;Slider ref={c =&gt; this.slider = c}&gt;
                      &lt;div className="sliderItem"&gt;Slide 1&lt;/div&gt;
                      &lt;div className="sliderItem"&gt;Slide 2&lt;/div&gt;
                      &lt;div className="sliderItem"&gt;Slide 3&lt;/div&gt;
                      &lt;div className="sliderItem"&gt;Slide 4&lt;/div&gt;
                  &lt;/Slider&gt;
              &lt;/div&gt;
          )
      }
  }
  </code></pre>
  
  <p>How to properly append class to a specific element in React?</p>