I'm struggling with setting up inline CSS styles in my React App. I want to dynamically change the background color of my cards based on data in an array, but so far have been unsuccessful. I've created a variable with a switch statement and passed it as inline style, but the background color is not changing. Can anyone help me solve this issue or suggest another solution? Thank you.
Here is my Card.js:
import React , { Component } from 'react'
export default class Card extends Component {
render(){
const {title , date , description , color } = this.props.node
let cardClass = "card-wrapper"
let myColor = ""
switch(color) {
case 'red':
myColor = 'color--red'
break;
case 'blue':
myColor = 'color--blue'
break;
case 'yellow':
myColor = 'color--yellow'
break;
case 'darkBlue':
myColor = 'color--darkBlue'
break;
default:
break;
}
return (
<div style={{ backgroundColor: myColor }}>
<div className={cardClass}>
<div className="card">
<h5 className="card-title">{title}</h5>
<p>Created on {date}</p>
<p className="card-text">{description}</p>
</div>
</div>
</div>
)
}
}
This is my App.css file:
.card-wrapper {
width: 209px;
margin: .4%;
float: left;
background-color: #5cb85c;
color: white;
padding: 16px;
border-radius: 1px;
}
.color--red {
background-color: #d9534f;
}
.color--blue{
background-color: #5bc0de;
}
.color--darkBlue{
background-color: #428bca;
}
.color--yellow {
background-color: #FFD333;
}
And this is my data.js file:
export const data = [
{
title : 'title',
date : '1537032686201',
description : 'Some quick example text to build on the card title and make up the bulk of the cards content.',
color:'red'
},
{
title : 'title',
date : '1537032686202',
description : 'Some quick example text to build on the card title and make up the bulk of the cards content.',
color:'blue'
},
{
title : 'title',
date : '1537032686203',
description : 'Some quick example text to build on the card title and make up the bulk of the cards content.',
color:'darkBlue'
},
{
title : 'title',
date : '1537032686204',
description : 'Some quick example text to build on the card title and make up the bulk of the cards content.',
color: 'yellow'
},
]