mercredi 6 avril 2022

Random Value in Table using ReactJS

First, I get the data from the json file. Next, I select the first 10 rows to change the value. Finally, I randomly selected 5 cells in those 10 rows to change the value. My aim is to randomly change the value in the selected cells, the value is also randomly selected in the interval [b,c].

I built the arrow function getColor to look at the color for the values of columns d, e according to conditions. Top 10 rows I need to change random data every 3 seconds for columns d and e. What I do is it changes all 10 cells (or lines?) but doesn't randomly change 5 cells in there.

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

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

and 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>

    );
}

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. Thanks




Aucun commentaire:

Enregistrer un commentaire