title: ReactJS: Need to change card styling using onClick function
body: <p>I know this will need a refactor later to separate things out into their own components, but I'm up against a time crunch at the moment and need to wire this up as is. I used array.map() to create card elements from a JSON object I'm using for testing purposes. I'm attempting to use an onClick function on a card <code>&lt;div&gt;</code> to save some identifiable information like 'offerid' into the component state and then check if the id in state matches the current card. If it matches, I want to add cardActive as the className on the div so that only that specific card changes color. I'm not sure how to do this. As it is now, all card stylings are updated no matter which card is selected. My React component and corresponding CSS are listed below. Any help would be hugely appreciated</p>
  
  <p>React</p>
  
  <pre><code>import React, { Component } from 'react';
  import Grid from '@material-ui/core/Grid';
  import './Button.css';
  
  class UsersList extends Component {
      constructor(){
          super();
  
          this.state = {
              cardActive: false,
  
              customers:
              [
                  {
                      "CustomerId": "1",
                      "LastName": "Doe",
                      "FirstName": "Jane",
                      "Address": {
                        "Address1": "1811 Chestnut Street",
                        "Address2": null,
                        "City": "Philadelphia",
                        "State": "Pennsylvania",
                        "Zip": "19103"
                      },
                      "Offers": [
                        {
                          "OfferId": "Offer1",
                          "Name": "Offer 1",
                          "Products": [
                            {
                              "ProductId": 1,
                              "ProductName": "Stuff"
                            },
                            {
                              "ProductId": 2,
                              "ProductName": "More stuff"
                            }
                          ],
                          "Price": "$1"
                        },
                        {
                          "OfferId": "Offer2",
                          "Name": "Offer 2",
                          "Price": "$2",
                          "Products": [
                            {
                              "ProductId": 3,
                              "ProductName": "A lot of stuff"
                            },
                            {
                              "ProductId": 4,
                              "ProductName": "And then there was stuff"
                            }
                          ]
                        },
                        {
                          "OfferId": "Offer3",
                          "Name": "Offer 3",
                          "Price": "$3",
                          "Products": [
                            {
                              "ProductId": 5,
                              "ProductName": "Good grief would you look at all this stuff"
                            },
                            {
                              "ProductId": 5,
                              "ProductName": "What a great deal for stuff"
                            }
                          ]
                        }
                      ]
                    }
                ]
          }
      }
  
      selectCard(){
          this.setState({ cardActive: !this.state.cardActive })
      }
  
  
      render (){
          let card_class = this.state.cardActive ? "cardActive" : "card";
          return (
              &lt;div&gt;
                  {this.state.customers.map((customer, index) =&gt; {
                      return  &lt;div key={index + customer.CustomerId}&gt;
                                  &lt;h2&gt;Customer&lt;/h2&gt;
                                  &lt;hr&gt;&lt;/hr&gt;
                                      &lt;h3 &gt;Name: {customer.LastName}, {customer.FirstName}&lt;/h3&gt;
                                      &lt;h3 &gt;Customer ID: {customer.CustomerId}&lt;/h3&gt;
                                      &lt;h3 &gt;
                                      Address: 
                                      &lt;br&gt;&lt;/br&gt;
                                      {customer.Address.Address1}
                                      &lt;br&gt;&lt;/br&gt;
                                      {customer.Address.City}, {customer.Address.State} {customer.Address.Zip} 
                                      &lt;/h3&gt;
                                      &lt;br&gt;&lt;/br&gt;
                                      &lt;h2&gt;Available Offers&lt;/h2&gt;
                                      &lt;Grid container spacing={24} justify="center"&gt; 
                                      {customer.Offers.map((Offer,index) =&gt; {
                                          return &lt;div key={index + Offer.OfferId} onClick={this.selectCard.bind(this)}&gt;
                                                  &lt;Grid item xs={12}&gt;
                                                  &lt;div className="card" class={card_class}&gt;
                                                      &lt;div className="container"&gt;
                                                          &lt;h5&gt;&lt;b&gt;{Offer.OfferId}&lt;/b&gt;&lt;/h5&gt; 
                                                          &lt;h2&gt;{Offer.Name}&lt;/h2&gt;
                                                          {Offer.Products.map((Product, index) =&gt; {
                                                              return &lt;div key={index + Product.ProductId}&gt;
                                                                      &lt;p&gt;+ {Product.ProductName}&lt;/p&gt;
                                                                    &lt;/div&gt;
  
                                                          })}
                                                          &lt;h3&gt;{Offer.Price}&lt;/h3&gt; 
                                                      &lt;/div&gt;
                                                  &lt;/div&gt;
                                                  &lt;/Grid&gt;
                                              &lt;/div&gt;
                                      })}
  
                                      &lt;/Grid&gt;
  
                              &lt;/div&gt;
  
                  })}
                  &lt;button className="navbuttonSelected"&gt;Submit&lt;/button&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default UsersList
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>  .card {
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
      transition: 0.3s;
      border-radius: 5px; /* 5px rounded corners */
      margin-left: 70px;
      margin-right: 70px;
      margin-bottom: 5%;
      cursor: pointer;
    }
  
    .cardActive {
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
      transition: 0.01s;
      border-radius: 5px; /* 5px rounded corners */
      margin-left: 70px;
      margin-right: 70px;
      margin-bottom: 5%;
      background: #0c72c5 !important;
      color: white !important;
      cursor: pointer;
    }
  
    .cardActive:hover {
      box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    }
  
    .card:hover {
      box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    }
  </code></pre>