This question is quite basic, but I'm struggling to understand it. I am working with React and JS and want to change the background of the "Charge Left" cell based on its value. For example, if the charge is less than 30, the background should be red; if the charge is between 31 and 59, it should be orange; and if the charge is greater than 59, it should be green.
I've tried various solutions in JS, but I can't seem to get any of them to work.
<StyledTableCell align="center">{user.chargeLeft}</StyledTableCell>import React, { useEffect, useState } from "react";
import "./App.css";
import "./colorChange.jsx";
import Amplify, { API, graphqlOperation } from "aws-amplify";
import awsconfig from "./aws-exports";
import { AmplifySignOut, withAuthenticator } from "@aws-amplify/ui-react";
import { listChargeProfiles } from "./graphql/queries";
import logo from "./evslogo.png";
import { Paper } from "@material-ui/core";
import { withStyles, makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
Amplify.configure(awsconfig);
function App() {
const StyledTableCell = withStyles(theme => ({
head: {
backgroundColor: theme.palette.common.black,
color: theme.palette.common.white,
fontSize: 18,
fontWeight: "bold"
},
body: {
fontSize: 16
}
}))(TableCell);
const StyledTableRow = withStyles(theme => ({
root: {
"&:nth-of-type(odd)": {
backgroundColor: theme.palette.action.hover
}
}
}))(TableRow);
const [users, setUsers] = useState([]);
useEffect(() => {
fetchUserData();
}, []);
const fetchUserData = async () => {
try {
const userData = await API.graphql(graphqlOperation(listChargeProfiles));
const userList = userData.data.listChargeProfiles.items;
setUsers(userList);
} catch (error) {
console.log("Failed to Return Users.", error);
}
};
const useStyles = makeStyles({
table: {
minWidth: 700
}
});
const classes = useStyles();
return (
<div className="App">
<header className="evs-header">
<div className="container">
{/* EVS Logo */}
<img src={logo} alt="Evs Energy Logo" className="logoEvs" />
<div className="vertical-divider"></div>
<p className="charge-text">
Charging <br />
Profile
</p>
</div>
<AmplifySignOut />
</header>
{/* Page Divider */}
<div className="evs-header-bar"></div>
<TableContainer component={Paper}>
<Table className={classes.table} aria-label="customized table">
<TableHead>
<TableRow>
<StyledTableCell align="center">First Name</StyledTableCell>
<StyledTableCell align="center">Last Name</StyledTableCell>
<StyledTableCell align="center">Email</StyledTableCell>
<StyledTableCell align="center">Car Model</StyledTableCell>
<StyledTableCell align="center">Charge Level</StyledTableCell>
</TableRow>
</TableHead>
<TableBody>
{users.map(user => (
<StyledTableRow>
<StyledTableCell align="center">
{user.firstName}
</StyledTableCell>
<StyledTableCell align="center">
{user.lastName}
</StyledTableCell>
<StyledTableCell align="center">{user.email}</StyledTableCell>
<StyledTableCell align="center">
{user.carModel}
</StyledTableCell>
<StyledTableCell align="center">
{user.chargeLeft}
</StyledTableCell>
</StyledTableRow>
))}
</TableBody>
</Table>
</TableContainer>
{/* Footer Section */}
<footer className="evs-footer">
<div className="container">
<p className="footer-text">About</p>
<p className="footer-text">Help Centre</p>
</div>
</footer>
</div>
// </div>
);
}