I am trying to set the variable bgColour inside an if statement to match the background colour of a div with the class of card. However, my attempts to access it have been unsuccessful. Can someone provide guidance on how to resolve this issue? Additionally, if there is a way to achieve this using a separate CSS file, that would be ideal.
renderIssues2 = () => {
let bgColours = ['Green', 'Yellow', 'Red'];
let statusOptions = ['Available', 'Under Maintenance', 'Not Working'];
return this.state.issues.length > 0 ?
this.state.issues.map((issue, index) => {
for (let i = 0; i < statusOptions.length; i++) {
if (statusOptions[i] === issue.status) {
let bgColour = bgColours[i];
}
}
return (
<div class="card" >
<div class="card-title">{issue.issues}</div>
<div class="card-body">{issue.message}</div>
</div>
);
})
:
null;
}