title: React toggle class on just one component
body: <p>I'm creating, in <code>componentDidMount</code>, a lots of <code>&lt;div&gt;</code>'s.</p>
  <pre><code>constructor (props) {
      super(props)
      this.state = {
          componentLoaded: false,
          divs: []
      }
  }
  
  componentDidMount () {
      this.createDivs()
  }
  
  createDivs () {
      // Actually, this divs are created dinamically and with infinite scroll
      let divs = &lt;div className='container'&gt;
          &lt;div className='item' onClick={() =&gt; { /* Add class */ }}&gt;...&lt;/div&gt;
          &lt;div className='item' onClick={() =&gt; { /* Add class */ }}&gt;...&lt;/div&gt;
          &lt;div className='item' onClick={() =&gt; { /* Add class */ }}&gt;...&lt;/div&gt;
          /* ... n divs ... */
      &lt;/div&gt;
      let newDivs = this.state.divs
      newDivs.push(divs)
      this.setState({
          componentLoaded: true,
          divs: newDivs
      })
  }
  
  render () {
      return {this.state.componentLoaded ? this.state.divs : null }
      /* In my return, if X event occurs, re-call this.createDivs() to add more divs */
  }
  </code></pre>
  <p>What I'm trying to achieve, is to toggle a class into only one of the <code>.item</code> divs, and then if clicking another one, remove it from the before and add it to the one was clicked.</p>
  <p>I've tried to add an attribute to the state, but it didn't add it. I also searched for some solutions, but I always find solutions which doesn't toggle, as they are &quot;toggled individually&quot; in separated components.</p>
  <p>Hoping to find some help, maybe this thing is real simple, but for now, I cannot figure out how to make it.</p>
  <p>PS: I'm adding the <code>createDivs</code> into the state because it's an infinite scroll that re-uses the function, so I just push them into the state and the scroll won't go to the top again when adding the previous ones + the new ones.</p>