I have a table that gets data from props. I want every time it gets a new prop, the background animation of the cell (td) changed. Also, I create an animation background to show the table cell is updated but it just shows background first time when is every cell is created and then when is prop updated background is not showing.
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)