title: Add className onClick by item id
body: <p>Sure it is something simple but I cannot see where I have gone wrong here.</p>
  
  <p>I am trying to add <code>className</code> <code>onClick</code> to a list from a <code>data.map</code>, taking note that <code>onClick</code> I only want the clicked <code>selectedId</code> to add the <code>className</code></p>
  
  <p>Here is where I am at</p>
  
  <pre><code>class Grid extends React.Component {
    constructor(props) {
      super(props);
      this.handleClick = this.handleClick.bind(this);
      this.state = {
        selectedId: null,
      };
    }
  
    handleClick = selectedId =&gt; {
      this.setState({
        selectedId,
      });
    };
  
    render() {
      const childElements = this.props.amenitiesData.edges.map(
        ({ node: amenity }) =&gt; {
          const isActive = amenity.id === this.state.selectedId;
          const showCopy = isActive ? 'showCopy' : '';
          return (
            &lt;div key={amenity.id} className="grid-item"&gt;
              &lt;div className={`copy-wrapper ${showCopy}`}&gt;
                &lt;div className="expand-button"&gt;
                  &lt;a
                    href="#"
                    onClick={() =&gt; this.handleClick(amenity.id)}
                  &gt;
                    ...
                  &lt;/a&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          );
        }
      );
  
      return (
        &lt;Wrapper&gt;
          {childElements}
        &lt;/Wrapper&gt;
      );
    }
  }
  </code></pre>
  
  <p>The issue is that when I click on any given item, the <code>className</code> is of <code>showCopy</code> is not added. </p>
  
  <p>Here is the current data structure for <code>amenity.id</code>. Passed from <code>parent</code> as <code>const amenitiesData = data.allContentfulAmenities;</code></p>
  
  <p>Please note that the data for each item in the list is correct with zero errors.</p>
  
  <pre><code>{
  "data": {
      "allContentfulAmenities": {
        "edges": [
          {
            "node": {
              "id": "8e9e933d-0395-5867-9e30-1c46726766f2"
            }
          },
          {
            "node": {
              "id": "4e04401c-5bdd-5174-8a2c-ea1fc36c0cc4"
            }
          },
          {
            "node": {
              "id": "ce89e346-8136-5afa-966b-6eb7443d9272"
            }
          },
          {
            "node": {
              "id": "7a85ee22-6ec5-5a53-9e60-44012ad24130"
            }
          },
          {
            "node": {
              "id": "f56e28bb-e1ff-5b59-be3a-1fde9333c79d"
            }
          },
          {
            "node": {
              "id": "078753ed-e6b0-5770-9ba5-6cb025c3aa5a"
            }
          },
          {
            "node": {
              "id": "a48ad8df-d084-550b-91e9-e4804308c336"
            }
          }
        ]
      }
    }
  }
  </code></pre>