I displaying a table that gets data from the data.json file. I need to randomly change the value of 5 cells out of the first 10 rows of columns d and e every 3s. that random value is between b and c.
what i do is randomly changing all 10 rows in columns d and e and it is not what i expected.
How to randomly change the value of 5 cells out of the first 10 rows of columns d and e?
Below is what i did. You can also watch it at https://codesandbox.io/s/stupefied-perlman-qoi4wp?file=/src/App.js

My 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
    }
  ]
}

Hope you can help. Please show an example of how it is done.

CodePudding user response：

I have this function to handle random cells between D and E

const random5Cells = (i = 0, result = []) => {
    const columnValue = randomValue(0, 1) ? "d" : "e";
    const cellValue = randomValue(0, 9);
    const pair = `${columnValue}:${cellValue}`;
    if (!result.includes(pair)) {
      i  ;
    } else {
      return random5Cells(i, result);
    }
    if (i === 6) {
      return result;
    }
    result.push(pair);
    return random5Cells(i, result);
  };

The result would be ["d:1","e:2","d:5","d:8","e:4"] (d is the column, number is the cell)

And then I do the check for all random cells

const isDIncluded = randomCells.some((value) => {
    const [column, cell] = value.split(":");
          return column === "d" && Number(cell) === index;
});
const isEIncluded = randomCells.some((value) => {
    const [column, cell] = value.split(":");
    return column === "e" && Number(cell) === index;
});
return (
   setData(get10Data.slice(0, 5)),
   (info.d = isDIncluded ? randomValue(info.b, info.c) : info.d),
   (info.e = isEIncluded ? randomValue(info.b, info.c) : info.e)
);

The full sandbox is here https://codesandbox.io/s/competent-bassi-c81wrf?file=/src/App.js:1262-1828