title: React - changing the background of a single span class not working
body: <p>I am new to React so my apologies if the question, or the thing I am trying to achieve is just weird (and please do tell if there is a better / more logic way to do this). </p>
  
  <p>I am using the <code>List</code> <code>Fabric React</code> component in my React application, which is based on the <code>ListGridExample</code> component which is found here:
  <a href="https://developer.microsoft.com/en-us/fabric#/components/list" rel="nofollow noreferrer">https://developer.microsoft.com/en-us/fabric#/components/list</a></p>
  
  <p>I have set it up but I can't seem to accomplish the following:</p>
  
  <p>When a <code>span class</code> (which is actually an item) in the <code>List</code> component is clicked, I want to change it's <code>background color</code>, to do this I have followed the instructions in the following post:
  <a href="https://forum.freecodecamp.org/t/react-js-i-need-a-button-color-to-change-onclick-but-cannot-determine-how-to-properly-set-and-change-state-for-that-component/45168" rel="nofollow noreferrer">https://forum.freecodecamp.org/t/react-js-i-need-a-button-color-to-change-onclick-but-cannot-determine-how-to-properly-set-and-change-state-for-that-component/45168</a></p>
  
  <p>This is a  fairly simple example but this changes all my <code>grid cells / span classes</code> to the color blue instead of only the clicked one. Is there a way I can make just the clicked span class change it's background? </p>
  
  <p>The Initial state:
  <a href="https://i.stack.imgur.com/bcBb6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bcBb6.png" alt="enter image description here"></a></p>
  
  <p>The state after clicking one span class (which is wrong):
  <a href="https://i.stack.imgur.com/LySW5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LySW5.png" alt="enter image description here"></a></p>
  
  <p><strong>Implementation code (ommitted some unecesary code):</strong></p>
  
  <pre><code>class UrenBoekenGrid extends React.Component {
  
      constructor(props) {
        super(props);
  
        this.state = {
          bgColor: 'red'
       }
  
      }
  
      render() {
        return (
          &lt;FocusZone&gt;
            &lt;List
  
              items={[
                  {
                  key: '#test1',
                  name: 'test1',
                  },
                  {
                  name: 'test2',
                  key: '#test2',
                  },
                  {
                  name: 'test3',
                  key: '#test3',
                  },
                  {
                  name: 'test4',
                  key: '#test4',
                  },
  
                  ..... up to 32 items
  
              ]}
  
              onRenderCell={this._onRenderCell}
  
            /&gt;
          &lt;/FocusZone&gt;
        );
      }
  
  
      changeColor(item){
          this.setState({bgColor: 'blue'});
  
          console.log('clicked item == ' + item.name)
  
        }
  
  
  
      _onRenderCell = (item, index) =&gt; {
  
          return (
            &lt;div
              className="ms-ListGridExample-tile"
              data-is-focusable={true}
              style={{
                width: 100 / this._columnCount + '%',
                height: this._rowHeight * 1.5,
                float: 'left'
              }}
            &gt;
              &lt;div className="ms-ListGridExample-sizer"&gt;
                &lt;div className="msListGridExample-padder"&gt;
  
                  {/* The span class with the click event: */}
                  &lt;span className="ms-ListGridExample-label" onClick={this.changeColor.bind(this, item)} style={{backgroundColor:this.state.bgColor}}&gt;{`item ${index}`}&lt;/span&gt;
                  &lt;span className="urenboeken-bottom"&gt;&lt;/span&gt;
  
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          );
      };
  
  
  }
  </code></pre>
  
  <p>I now have attached the <code>click event</code> to the <code>span class</code> itself but I would think it is way more logic to have the <code>click event</code> on the <code>item(s)</code> (array) itself, however I could not find a way to achieve this either.</p>
  
  <p><strong>----UPDATE----</strong></p>
  
  <p>@peetya answer seems the way to go since @Mario Santini answer just updates a single cell, if another cell is clicked then the previous one returns back to normal and loses it's color. </p>
  
  <p>So what I did is adding the <code>items array</code> to the <code>state</code> and adding the <code>bgColor</code> property to them:</p>
  
  <pre><code>this.state = {
          items: [
              {
                  key: '#test1',
                  name: 'test1',
                  bgColor: 'blue',
              },
              {
                  name: 'test2',
                  key: '#test2',   
                  bgColor: 'blue',    
              },
              {
                  name: 'test3',
                  key: '#test3',
                  bgColor: 'blue',    
              },
              {
                  name: 'test4',
                  key: '#test4',
                  bgColor: 'blue',    
              },
          ],
       }
  </code></pre>
  
  <p>Now in my <code>List</code> rendering I have set the items to the <code>state items</code> array and added the <code>onClick</code> event in the <code>_onRenderCell</code> function:</p>
  
  <pre><code>render() {
        return (
          &lt;FocusZone&gt;
            &lt;List
  
              items={this.state.items}
  
              getItemCountForPage={this._getItemCountForPage}
              getPageHeight={this._getPageHeight}
              renderedWindowsAhead={4}
              onRenderCell={this._onRenderCell}
  
            /&gt;
          &lt;/FocusZone&gt;
        );
      }
  
  
  _onRenderCell = (item, index) =&gt; {
  
          return (
            &lt;div
              className="ms-ListGridExample-tile"
              data-is-focusable={true}
              style={{
                width: 100 / this._columnCount + '%',
                height: this._rowHeight * 1.5,
                float: 'left'
              }}
            &gt;
              &lt;div className="ms-ListGridExample-sizer"&gt;
                &lt;div className="msListGridExample-padder"&gt;
  
                  &lt;span className="ms-ListGridExample-label" 
                       onClick={this.onClick(item.name)} 
                       style={{backgroundColor: item.bgColor}}
                  &gt;
                      {`item ${index}`}
                  &lt;/span&gt;
  
                  &lt;span className="urenboeken-bottom"&gt;&lt;/span&gt;
  
  
  
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          );
      };
  </code></pre>
  
  <p>The problem is that I can't add the <code>onClick event</code> in the <code>_onRenderCell</code> function as this will give the following error:</p>
  
  <p><a href="https://i.stack.imgur.com/lsiuo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lsiuo.png" alt="enter image description here"></a></p>
  
  <p>I want to keep the Fabric <code>List component</code> as it also has functions for rendering / adjusting to screen size, removing the list component entirely and just replacing it with what @peetya suggested works:</p>
  
  <pre><code>render() {
          &lt;div&gt;
              {this.state.items.map(item =&gt; (
                  &lt;div onClick={() =&gt; this.onClick(item.name)} style={{backgroundColor: item.bgColor}}&gt;
                      {item.name}
                  &lt;/div&gt;
              ))}
          &lt;/div&gt;
      }
  </code></pre>
  
  <p>But this will also remove the <code>List</code> component functionality with it's <code>responsive</code> functions.</p>
  
  <p>So my last idea was to just replace the <code>items</code> of the <code>List</code> with the entire <code>onClick</code> div and removing the <code>_onRenderCell</code> function itself, but this makes the page blank (can't see the cells at all anymore..):</p>
  
  <pre><code>  render() {
        return (
          &lt;FocusZone&gt;
            &lt;List
  
              items={this.state.items.map(item =&gt; (
                  &lt;div onClick={() =&gt; this.onClick(item.name)} style={{backgroundColor: item.bgColor}}&gt;
                      {item.name}
                  &lt;/div&gt;
              ))}
  
              getItemCountForPage={this._getItemCountForPage}
              getPageHeight={this._getPageHeight}
              renderedWindowsAhead={4}
             // onRenderCell={this._onRenderCell}
  
            /&gt;
          &lt;/FocusZone&gt;
        );
      }
  </code></pre>
  
  <p>I thought that perhaps the css <code>ms-classes</code> / div's should be in there as well because these have the height/width properties but adding them (exactly as in the <code>_onRenderCell</code> function) does not make any difference, the page is still blank.</p>