0

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)

1 Answer 1

0

You will need to add some logic to detect the prop change, and then update the styling when that occurs.

Currently your animation only plays on page load because you don't have this logic.

There are many ways you could go about it, but take a look at this tutorial for a starting point.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.