title: Change in state not affecting other elements
body: <p>I have set up a function that handles an onClick event that toggles an icon. The function toggles the icon, affects the state, and changes the class but these things do not apply to the table row. </p>
  
  <pre><code>{this.state.company.map((comp, i) =&gt;
      &lt;tr key={i} className={this.state.checked ? 'colored' : 'none'}&gt;
        &lt;td&gt;
           &lt;i className={this.state.checked ? 'bx bxs-checkbox-checked' : 'bx bx-checkbox'} onClick={(e) =&gt; this.handleCheck(e,comp.id)}&gt;&lt;/i&gt;
        &lt;/td&gt;
        &lt;td&gt;
           &lt;Link to={`/view/${comp.id}`}&gt;{comp.name}&lt;/Link&gt;
        &lt;/td&gt;
        &lt;td&gt;{comp.type}@gmail.com&lt;/td&gt;
        &lt;td&gt;{comp.id}&lt;/td&gt;
        &lt;td&gt;
           &lt;Badge variant="primary"&gt;Primary&lt;/Badge&gt;
        &lt;/td&gt;
     &lt;/tr&gt;
  )}
  </code></pre>
  
  <p>Basically, I want the background of the table row to change when the icon is toggled.</p>