Put two backgroundcolor on two lines only - reactjs

Question

How can I put two color backgrounds on two different lines?
I managed to set it up on a row before click on a table row and I would like to put a second backgroundcolor on another row when a condition is met
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
import {TableBody, Table, TableCell, TableContainer, TableHead, TableRow, Paper} from "#material-ui/core";
import { useState } from "react";
const useStyles = makeStyles({
table: {
minWidth: 650
},
tableRow: {
"&$selected, &$selected:hover": {
backgroundColor: "#E8E8E8"
}
},
hover: {},
selected: {}
});
function createData(name, calories, fat, carbs, protein) { return { name, calories, fat, carbs, protein }; }
const rows = [ createData("Frozen yoghurt", 159, 6.0, 24, 4.0), createData("Ice cream sandwich", 237, 9.0, 37, 4.3), createData("Eclair", 262, 16.0, 24, 6.0), createData("Cupcake", 305, 3.7, 67, 4.3), createData("Gingerbread", 356, 16.0, 49, 3.9) ];
export default function SimpleTable() {
const classes = useStyles();
const [selectedIndex, setSelectedIndex] = useState(null);
const val = false;
const secondRow = 0;
const selectRow = (i) => {
setSelectedIndex(i);
if (val) {
// put a backgroundcolor on line 1
}
};
return (
<TableContainer component={Paper}>
<Table className={classes.table} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>Dessert (100g serving)</TableCell>
<TableCell align="right">Calories</TableCell>
<TableCell align="right">Fat (g)</TableCell>
<TableCell align="right">Carbs (g)</TableCell>
<TableCell align="right">Protein (g)</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row, index) => (
<TableRow hover key={row.name} onClick={() => {selectRow(index);}} selected=selectedIndex === index} classes={{ hover: classes.hover, selected: classes.selected }} className={classes.tableRow} >
<TableCell component="th" scope="row">
{row.name}
</TableCell>
<TableCell align="right">{row.calories}</TableCell>
<TableCell align="right">{row.fat}</TableCell>
<TableCell align="right">{row.carbs}</TableCell>
<TableCell align="right">{row.protein}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
}
https://codesandbox.io/s/material-demo-forked-5u4jz?file=/demo.js

Answer 1

You can assign an array as your state for it to contain the selected indices. In the example below, I used shift on the array to retain the latest selection, remove the oldest one, and push the new one.
const [selectedIndex, setSelectedIndex] = useState([]);
const selectRow = (i) => {
// checks to see if it's already selected
if (selectedIndex.includes(i)) {
return;
}
let newSelected = [...selectedIndex];
// sample logic for the "only 2 rows selected" requirement
if (newSelected.length === 2) {
newSelected.shift();
newSelected.push(i);
} else {
newSelected.push(i);
}
setSelectedIndex(newSelected);
};
<TableRow
onClick={() => {
selectRow(index);
}}
selected={selectedIndex.includes(index)}
>
https://codesandbox.io/s/material-demo-forked-h5i77?file=/demo.js