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). 

I am using the `List` `Fabric React` component in my React application, which is based on the `ListGridExample` component which is found here:
<https://developer.microsoft.com/en-us/fabric#/components/list>

I have set it up but I can't seem to accomplish the following:

When a `span class` (which is actually an item) in the `List` component is clicked, I want to change it's `background color`, to do this I have followed the instructions in the following post:
<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>

This is a fairly simple example but this changes all my `grid cells / span classes` 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? 

The Initial state:
[![enter image description here](https://i.stack.imgur.com/bcBb6.png)](https://i.stack.imgur.com/bcBb6.png)

The state after clicking one span class (which is wrong):
[![enter image description here](https://i.stack.imgur.com/LySW5.png)](https://i.stack.imgur.com/LySW5.png)

**Implementation code (ommitted some unecesary code):**

```
class UrenBoekenGrid extends React.Component {

    constructor(props) {
      super(props);

      this.state = {
        bgColor: 'red'
     }

    }

    render() {
      return (
        <FocusZone>
          <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}

          />
        </FocusZone>
      );
    }

    changeColor(item){
        this.setState({bgColor: 'blue'});

        console.log('clicked item == ' + item.name)

      }

    _onRenderCell = (item, index) => {

        return (
          <div
            className="ms-ListGridExample-tile"
            data-is-focusable={true}
            style={{
              width: 100 / this._columnCount + '%',
              height: this._rowHeight * 1.5,
              float: 'left'
            }}
          >
            <div className="ms-ListGridExample-sizer">
              <div className="msListGridExample-padder">

                {/* The span class with the click event: */}
                <span className="ms-ListGridExample-label" onClick={this.changeColor.bind(this, item)} style={{backgroundColor:this.state.bgColor}}>{`item ${index}`}</span>
                <span className="urenboeken-bottom"></span>

              </div>
            </div>
          </div>
        );
    };

}

```

I now have attached the `click event` to the `span class` itself but I would think it is way more logic to have the `click event` on the `item(s)` (array) itself, however I could not find a way to achieve this either.

**----UPDATE----**

@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. 

So what I did is adding the `items array` to the `state` and adding the `bgColor` property to them:

```
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',    
            },
        ],
     }

```

Now in my `List` rendering I have set the items to the `state items` array and added the `onClick` event in the `_onRenderCell` function:

```
render() {
      return (
        <FocusZone>
          <List

            items={this.state.items}

            getItemCountForPage={this._getItemCountForPage}
            getPageHeight={this._getPageHeight}
            renderedWindowsAhead={4}
            onRenderCell={this._onRenderCell}

          />
        </FocusZone>
      );
    }

_onRenderCell = (item, index) => {

        return (
          <div
            className="ms-ListGridExample-tile"
            data-is-focusable={true}
            style={{
              width: 100 / this._columnCount + '%',
              height: this._rowHeight * 1.5,
              float: 'left'
            }}
          >
            <div className="ms-ListGridExample-sizer">
              <div className="msListGridExample-padder">

                <span className="ms-ListGridExample-label" 
                     onClick={this.onClick(item.name)} 
                     style={{backgroundColor: item.bgColor}}
                >
                    {`item ${index}`}
                </span>

                <span className="urenboeken-bottom"></span>

              </div>
            </div>
          </div>
        );
    };

```

The problem is that I can't add the `onClick event` in the `_onRenderCell` function as this will give the following error:

[![enter image description here](https://i.stack.imgur.com/lsiuo.png)](https://i.stack.imgur.com/lsiuo.png)

I want to keep the Fabric `List component` 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:

```
render() {
        <div>
            {this.state.items.map(item => (
                <div onClick={() => this.onClick(item.name)} style={{backgroundColor: item.bgColor}}>
                    {item.name}
                </div>
            ))}
        </div>
    }

```

But this will also remove the `List` component functionality with it's `responsive` functions.

So my last idea was to just replace the `items` of the `List` with the entire `onClick` div and removing the `_onRenderCell` function itself, but this makes the page blank (can't see the cells at all anymore..):

```
  render() {
      return (
        <FocusZone>
          <List

            items={this.state.items.map(item => (
                <div onClick={() => this.onClick(item.name)} style={{backgroundColor: item.bgColor}}>
                    {item.name}
                </div>
            ))}

            getItemCountForPage={this._getItemCountForPage}
            getPageHeight={this._getPageHeight}
            renderedWindowsAhead={4}
           // onRenderCell={this._onRenderCell}

          />
        </FocusZone>
      );
    }

```

I thought that perhaps the css `ms-classes` / div's should be in there as well because these have the height/width properties but adding them (exactly as in the `_onRenderCell` function) does not make any difference, the page is still blank.