Skip to main content
1 de 3
Rindi
  • 73
  • 1
  • 1
  • 11

Como colocar objetos em array vazio com React Hooks

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.

Rindi
  • 73
  • 1
  • 1
  • 11