I have a dynamic table that receives data from props. I would like the background animation of each cell (td) to change every time it receives new props. I've tried creating an animation for the background to indicate when a cell is updated, but it only shows the background color the first time a cell is created. Subsequent updates do not trigger the background animation.
import React from 'react'
import { TableRow, TableCell } from '@material-ui/core/'
import { makeStyles } from '@material-ui/core/styles'
const useStyles = makeStyles(theme => ({
cell: {
background: 'none',
animation: `$bgColor 3s`,
animationIterationCount: 1
},
'@keyframes bgColor': {
'0%': {
background: '#aacc00'
},
'100%': {
background: 'none'
}
}
}))
const RenderBodyTable = ({ rows, isClient, filter, dataRow }) => {
const classes = useStyles()
return rows.map(row => (
<TableRow key={row.id}>
<TableCell className={classes.cell}>{row.name}</TableCell>
<TableCell className={classes.cell}>{row.family}</TableCell>
<TableCell className={classes.cell}>{row.tell}</TableCell>
<TableCell className={classes.cell}>{row.address}</TableCell>
</TableRow>
))
}
export default React.memo(RenderBodyTable)