ReactJS Table conditional styling based on previous value - reactjs

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:
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
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).
Then you can use css to add the border, so that you can achieve 'conditional styling based on previous value'.

Answer 2

If you can change the styling by adding or deleting class on some element this can easily be done.
<td className={shouldBeBlack ? 'black' : 'orange'} ></td>
so like depending on value of shouldBeBlack you can set css property of the table data or any element. Just depends how u r styling.
If there is some prop you can pass to the material ui element then same c=kind of ternary equation can be made for the same.

Answer 3

By apply mapping, you can add check like this
rows.map((row,index)=>{
if(index !== 0)?
<td className={row.date === rows[index-1].date? 'blackLine' : 'orangeLine'} </td>
:
<td className='black'} ></td>
})