Currently, I am aware that there will be a need to refactor this code later on to separate things into their own components. However, due to time constraints, I have to wire this up as is at the moment. To achieve this, I utilized array.map() to create card elements from a JSON object used for testing purposes. The goal is to use an onClick function on a card <div> to save identifiable information such as 'offerid' into the component state and then compare the id in the state with the current card. If they match, I intend to add 'cardActive' as the className on the div so that only that specific card changes color. Unfortunately, I am unsure of how to accomplish this. As it stands now, all card stylings get updated regardless of which card is selected. Below are my React component and corresponding CSS. Any assistance provided would be greatly appreciated.
React
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 (
<div>
{this.state.customers.map((customer, index) => {
return <div key={index + customer.CustomerId}>
<h2>Customer</h2>
<hr></hr>
<h3 >Name: {customer.LastName}, {customer.FirstName}</h3>
<h3 >Customer ID: {customer.CustomerId}</h3>
<h3 >
Address:
<br></br>
{customer.Address.Address1}
<br></br>
{customer.Address.City}, {customer.Address.State} {customer.Address.Zip}
</h3>
<br></br>
<h2>Available Offers</h2>
<Grid container spacing={24} justify="center">
{customer.Offers.map((Offer,index) => {
return <div key={index + Offer.OfferId} onClick={this.selectCard.bind(this)}>
<Grid item xs={12}>
<div className="card" class={card_class}>
<div className="container">
<h5><b>{Offer.OfferId}</b></h5>
<h2>{Offer.Name}</h2>
{Offer.Products.map((Product, index) => {
return <div key={index + Product.ProductId}>
<p>+ {Product.ProductName}</p>
</div>
})}
<h3>{Offer.Price}</h3>
</div>
</div>
</Grid>
</div>
})}
</Grid>
</div>
})}
<button className="navbuttonSelected">Submit</button>
</div>
)
}
}
export default UsersList
CSS
.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);
}