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