Discussion on: Help? .map .reduce

[cristiantsantos]

import React, { useState, useEffect } from "react";
import Chart from "react-google-charts";
import api from '~/services/api';
import { Container } from './styles';
import { startOfDay, endOfDay } from 'date-fns';
function Products() {
const [chartdata1, setChartdata1] = useState([["Category","value"],["Categoria1", 16.6]])
useEffect(() => {
async function loadchart() {
const date1 = startOfDay(new Date())
const date2 = endOfDay(new Date())
const response = await api.get('sales', {
params: { date1, date2 }
});

  const sum = (a, b) => a+b;
  const uniqueCategories = (array) => [...new Set(array.map(item => item.category))];
  const apiResult = [
    {name: "test1", category: "Categoria1", price: 3},
    {name: "test2", category: "Categoria1", price: 13.6},
    {name: "test3", category: "Categoria2", price: 8},
    {name: "test4", category: "Categoria2", price: 8}
  ];
  const chartData = uniqueCategories(apiResult).map(category => [
    category,
    apiResult
      .filter(item => item.category===category)
      .map(item => item.price)
      .reduce(sum)
  ]);

  chartData.splice(0, 0, ["Category","value"])
  console.log(JSON.stringify(chartData));

  setChartdata1(JSON.stringify(chartData))
}
loadchart();

}, []);

[cristiantsantos]

I'm sorry, I don't know how to post the code correctly.

Thank you very much for the help you are giving me

[ecyrbe]

just do setChartdata1(chartData)

import React, { useState, useEffect } from "react";
import Chart from "react-google-charts";
import api from '~/services/api';
import { Container } from './styles';
import { startOfDay, endOfDay } from 'date-fns';

// put your independant functions outside your components
const sum = (a, b) => a+b;
const uniqueCategories = (array) => [...new Set(array.map(item => item.category))];


function Products() {
  const [chartdata1, setChartdata1] = useState([["Category","value"],["Categoria1", 16.6]])
  useEffect(() => {
    async function loadchart() {
      const date1 = startOfDay(new Date())
      const date2 = endOfDay(new Date())
      const response = await api.get('sales', {
        params: { date1, date2 }
      });
      const apiResult = [
        {name: "test1", category: "Categoria1", price: 3},
        {name: "test2", category: "Categoria1", price: 13.6},
        {name: "test3", category: "Categoria2", price: 8},
        {name: "test4", category: "Categoria2", price: 8}
      ];
      const chartData = uniqueCategories(apiResult).map(category => [
        category,
        apiResult
          .filter(item => item.category===category)
          .map(item => item.price)
          .reduce(sum)
      ]);
      setChartdata1([["Category","value"],...chartData]);
   }
   loadchart();
  },[]);

[cristiantsantos]

I had done it, really, and it hadn't worked.

Now it worked.

Thank you very much, I don't know how to thank you. I've been in this for 2 days.

Thank you