ReactJS Table conditional styling based on previous value

Question

I have a React JS app using Material-UI Table component that looks like this:

I need to change the style of the border between the last row of the same date and the first row of another date like between Date A and Date B like this:

My code to create the table is just a normal map :

<TableCell>
                <Typography style={{ fontSize: 16 }}>{new Date(row.date).toLocaleDateString().slice(0, 10)}</Typography>
            </TableCell>
            <TableCell><Typography noWrap={true} style={{ fontSize: 16 }}>{row.user}</Typography></TableCell>
            <TableCell><Typography style={{ fontSize: 16 }}>{row.duration}h</Typography></TableCell>
            <TableCell><Typography style={{ fontSize: 16 }}>{row.description}</Typography></TableCell>
            <TableCell style={{ width: 35 }} align="left">
                <IconButton
                    className={classes.iconButton}
                    style={{ marginRight: 3 }}
                    onClick={() => openWorklogModalForEdit(row.id, row.date, row.duration, row.description, row.project_id, row.user_id, row.project, row.clientName)}>
                    <EditIcon className={classes.actionsButtonIcon} />
                </IconButton>
            </TableCell>
            <TableCell style={{ width: 65 }} align="right" >
                <IconButton
                    className={classes.iconButton}
                    onClick={() => deleteWorklog(row.id)}>
                    <DeleteIcon className={classes.actionsButtonIcon} />
                </IconButton>
            </TableCell>
        </TableRow>

Thank you for your time!

Answer 1

You can add class for first table row of different date when using .map. Please refer to this code snippet for a simple demo.

Thoughts:

1. As you're using map to construct a table from an array, the syntax is

let newArray = arr.map(callback(currentValue[, index[, array]]) {
  // return element for newArray, after executing something
}[, thisArg]);

docs: link

2. Then in the map callback body, you have access to current value and index. Then you can check whether the current item is the first of a new 'group', or a new date. If true, you can add a custom class to this row (as the demo is doing).

3. Then you can use css to add the border, so that you can achieve 'conditional styling based on previous value'.