I am displaying a table that gets data from the data.json file. I built the arrow function getColor to consider the color for the values ​​of columns d, e according to the conditions. Top 10 rows I need to change random data every 3s for columns d and e. I want when the value in the cell changes, the color also changes according to the condition of the arrow function getColor and will highlight the cell with that changed value in 1s with two backgrouds corresponding to 2 different colors. I'm not sure how to highlight background the cells that have changed values

below is what i did. You can also watch it at https://codesandbox.io/s/stupefied-perlman-qoi4wp?file=/src/App.js the App.js file looks like this:

import React, { useState, useEffect } from "react";
import data from './datafile/data.json';
import './styles.css'
export default function App() {

    const getColor = (a, b, c, value) =>{
      if(value > a && value < b){
          return "green";
      }else if(value > c && value < a){
          return "red"
      }
    }

    let ListData = data.list;
    let get10Data = ListData.slice(0, 10)

    const [list, setData] = useState(get10Data);
    const randomValue = (min, max) => {
        let value = Math.floor(Math.random() * (max - min   1)   min)
        return value;
    }
    const ChangeData = () => {
      get10Data.slice().map((info) => {
        if (info.a && info.b &&
          info.c && info.d && info.e !== undefined) {
          randomValue(info.b, info.c)
          return (
            setData(get10Data.slice(0, 5)),
            info.d = randomValue(info.b, info.c),
            info.e = randomValue(info.b, info.c)
            )
        }else {
            return ''
        }
      })
    }
    useEffect(() => {
        setInterval(ChangeData, 3000)
    }, [])  
    
    const Reacords = data.list.map(info => {
        return (
            <tr>
                <td>{info.name}</td>
                <td>{info.a}</td>
                <td>{info.b}</td>
                <td>{info.c}</td>
                <td className={getColor(info.a, info.b, info.c, info.d)}>{info.d}</td>
                <td className={getColor(info.a, info.b, info.c, info.e)}>{info.e}</td>
            </tr>
        )
    })

    return (
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>a</th>
                        <th>b</th>
                        <th>c</th>
                        <th>d</th>
                        <th>e</th>
                    </tr>
                </thead>
                <tbody>
                    {Reacords}
                </tbody>
            </table>

    );
}

the data.json file looks like this:

{
  "a": "ok",
  "list": [
      {
          "name": "A",
          "a": 50,
          "b": 90,
          "c": 30,
          "d": 40,
          "e": 85
      },
      {
          "name": "B",
          "a": 63,
          "b": 110,
          "c": 40,
          "d": 87,
          "e": 85
      },
      {
          "name": "C",
          "a": 48,
          "b": 85,
          "c": 25,
          "d": 30,
          "e": 43
      },
      {
        "name": "D",
        "a": 45,
        "b": 90,
        "c": 30,
        "d": 40,
        "e": 85
    },
    {
        "name": "E",
        "a": 63,
        "b": 110,
        "c": 40,
        "d": 87,
        "e": 85
    },
    {
        "name": "F",
        "a": 48,
        "b": 85,
        "c": 25,
        "d": 30,
        "e": 43
    },
    {
          "name": "G",
          "a": 50,
          "b": 90,
          "c": 30,
          "d": 40,
          "e": 85
      },
      {
          "name": "H",
          "a": 63,
          "b": 110,
          "c": 40,
          "d": 87,
          "e": 85
      },
      {
          "name": "I",
          "a": 48,
          "b": 85,
          "c": 25,
          "d": 30,
          "e": 43
      },
      {
        "name": "K",
        "a": 50,
        "b": 90,
        "c": 30,
        "d": 40,
        "e": 85
    },
    {
        "name": "L",
        "a": 63,
        "b": 110,
        "c": 40,
        "d": 87,
        "e": 85
    },
    {
        "name": "M",
        "a": 48,
        "b": 85,
        "c": 25,
        "d": 30,
        "e": 43
    }
  ]
}

Hope you can help. Please show an example of how it is done. random value generation part if anyone have another way can let me know.

CodePudding user response：

I'm not going to build a random colour generator for you, but I'll demonstrate how to set backgrounds on your tr

First a function to be called that can return style attributes:

  const getRowColor = (a, b, c, value) => {
    if (value > a && value < b) {
      return { backgroundColor:'#F22' };
    } else if (value > c && value < a) {
      return { backgroundColor:'#2F2' };
    }
  };

Then on your table tr add the call to the function:

<tr style={getRowColor(info.a,info.b,info.c,info.d)}>

CodePudding user response：

Just add additional css background-color properties to your existing classes:

.green {
  color: green;
  background-color: lightgreen;
}
.red {
  color: red;
  background-color: lightcoral;
}

see it in action in this fork of your codesandbox