Tenho o seguinte conjunto de dados:
const dados = [5, 10, 15, 20, 25, 50, 90];
const colors = [
"#52DF9A",
"#FFCE1C",
"#3570BD",
"#3570BD",
"#00B894",
"#FB6B32",
];
E tenho o seguinte estado:
const [data, setData] = useState([{}]);
Preciso percorrer os dados e colocar um dado com uma respectiva cor, para que o estado "dado" fique da seguinte mandeira:
data = [{valor: 5, color: "#52DF9A" },
{valor: 10, color: "#FFCE1C" }, ...
]
Fiz da seguinte maneira com useEffect :
useEffect(() => {
dados.forEach((dado, i) => {
setData((prev) => {
return [...prev, { valor: dado, color: colors[i] }];
});
});
}, []);
Mas o problema é que, quando eu faço dessa forma, a primeira posição fica vazia: {}, e eu preciso que os dados comecem na primeira posição. Como eu posso resolver isso? Porque se eu fizer assim: const [data, setData] = useState([]); ele da um erro.