title: Toggle active CSS state with repeating divs React.JS
body: <p>I've been stuck on for days now. I'm trying to keep each div (activity) selected when the user clicks on it and able to be de-selected (essentially having a toggle state). I have a list of JSON objects and rows of divs and that have a purple background when you hover over it. </p>
  
  <p><a href="https://i.stack.imgur.com/pBRLv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pBRLv.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;script type="text/babel"&gt;
        var items = [
       {
          "topicName": "Kanye West",
          "imageURL":"https://d235mwrq2dn9n5.cloudfront.net/wp-content/uploads/2016/07/Kanye-West-2-11-16-1-616x440-111.jpg"
       },
       {
          "topicName": "Kanye West",
          "imageURL":"https://d235mwrq2dn9n5.cloudfront.net/wp-content/uploads/2016/07/Kanye-West-2-11-16-1-616x440-111.jpg"
       },
       {
          "topicName": "Kanye West",
          "imageURL":"https://d235mwrq2dn9n5.cloudfront.net/wp-content/uploads/2016/07/Kanye-West-2-11-16-1-616x440-111.jpg"
       },
       {
          "topicName": "Kanye West",
          "imageURL":"https://d235mwrq2dn9n5.cloudfront.net/wp-content/uploads/2016/07/Kanye-West-2-11-16-1-616x440-111.jpg"
       },
       {
          "topicName": "Kanye West",
          "imageURL":"https://d235mwrq2dn9n5.cloudfront.net/wp-content/uploads/2016/07/Kanye-West-2-11-16-1-616x440-111.jpg"
       },
       {
          "topicName": "Kanye West",
          "imageURL":"https://d235mwrq2dn9n5.cloudfront.net/wp-content/uploads/2016/07/Kanye-West-2-11-16-1-616x440-111.jpg"
       },
       {
          "topicName": "Kanye West",
          "imageURL":"https://d235mwrq2dn9n5.cloudfront.net/wp-content/uploads/2016/07/Kanye-West-2-11-16-1-616x440-111.jpg"
       },
       {
          "topicName": "Kanye West",
          "imageURL":"https://d235mwrq2dn9n5.cloudfront.net/wp-content/uploads/2016/07/Kanye-West-2-11-16-1-616x440-111.jpg"
       },
       {
          "topicName": "Kanye West",
          "imageURL":"https://d235mwrq2dn9n5.cloudfront.net/wp-content/uploads/2016/07/Kanye-West-2-11-16-1-616x440-111.jpg"
       }
    ];
  
      var RepeatModule = React.createClass({
       getDefaultProps: function() {
        return { items: [] }
       },
       render: function() {
  
        var listItems = this.props.items.map(function(item) {
         return ( 
  
         &lt;div className="column one-quarter"&gt; 
          &lt;div className="topicContainer"&gt;  
            &lt;h3&gt;{item.topicName}&lt;/h3&gt;,
              &lt;img src={item.imageURL}/&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
         );
        });
        return (
          &lt;div&gt;
            {listItems}      
          &lt;/div&gt;
        );
       }
      });
      ReactDOM.render(&lt;RepeatModule items={items} /&gt;,     
       document.getElementById('topics'));
    &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;div class="container"&gt;
      &lt;div class="centerInterests row"&gt;
        &lt;p class="select"&gt;Select 3 or more activities to personalize your feed&lt;/p&gt;
        &lt;input class="interestBox pad-75-left" type="text" placeholder="Search for activities"&gt;
        &lt;p class="topicText"&gt;Popular Activities&lt;/p&gt;
        &lt;div class="row"&gt;
          &lt;div id="topics"&gt;&lt;/div&gt; 
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;script src="/javascripts/start.js" type="text/javascript"&gt;&lt;/script&gt; 
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
      // $('.topicContainer').on('click', function (e) {
      //     $('.topicContainer').toggleClass("purpleOverlay");
      // });
  
      // $('div.topicContainer').click(function(){
      //    $('.topicContainer').toggleClass("purpleOverlay");
      //    console.log("here I go");
      // });
    &lt;/script&gt;
    &lt;/body&gt;
  </code></pre>
  
  <p>CSS Code: </p>
  
  <pre><code>.topicImage {
      padding-bottom: 75%;
      background-position: 50% 50%;
      background-repeat: no-repeat;
      background-size: cover;
      margin: 0 auto;
      position: relative !important;
      height:150px;
      background-color: rgba(0, 0, 0, 0.8) !important;
  
  }
  
  .text-inside-image {
    position: absolute;
    top: 20%;
    left: 35%;
    color: white;
    font-size: 24px;
    font-weight: 500;
    z-index: 1;
  }
  
  .topicContainer {
      position: relative;
      background-color: #171616;
      overflow: hidden;
      height: 150px;
  }
  .topicContainer h3 {
      text-align: center;
      z-index: 2;
      position: relative;
      color: #fff;
      padding: 50px;
  } 
  .topicContainer img {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: auto;
      z-index: 1;
      opacity: 0.6;
  }
  
  .topicContainer:hover {
    background-color: #5450DC;
  }
  
  .topicContainer.active {
    background-color: #5450DC;
  }
  
  .purpleOverlay {
    background-color: #5450DC;
  }
  </code></pre>
  
  <p>I've tried everything from JQuery implementations to toggle active CSS states to implementing handleclick in React.js (i.e. <a href="https://jsfiddle.net/uwadhwnr/" rel="nofollow noreferrer">https://jsfiddle.net/uwadhwnr/</a>) </p>
  
  <p><strong>Why is this occurring? How can I solve this problem?</strong></p>