Question

0

281

Views

Getting the number of times an item appears in an array before getting the unique values in React Code not working

In this my project, I have an array of objects where I'm to get the unique values so i can use the unique values as a checkbox label. Now, that works fine but the problem now is that I needed to get the numbers of occurrence in front of the values. I can't get this at the moment because the values now returns only the unique values using the Set method. Form example.. I want to have something like 2021-10-25(3) 2021-10-18(1) 2021-10-04(2).

link to replit replitlink

Here is my App.js code

import "./styles.css";
import React, { useEffect, useState, useRef } from "react";

export default function App() {
 
 const Defaultdata = [
  {
    date_listed: "4 hours ago",
    id: "7857699961",
    delivery_time_frame: "2021-10-25 - 2021-11-14",
    distance: "22.8 km",
    time_stamp: "2021-10-25 16:36:54",
    watched: "yes"
  },
  {
    date_listed: "3 days ago",
    id: "8358962006",
    delivery_time_frame: "2021-10-18 - 2021-10-24",
    distance: "4.3 km",

    time_stamp: "2021-10-22 16:54:12"
  },
  {
    date_listed: "4 hours ago",
    delivery_id: "8146462294",
    delivery_time_frame: "2021-10-25",
    distance: "4.3 km",
    time_stamp: "2021-10-25 16:12:32"
  },
  {
    date_listed: "4 hours ago",
    delivery_id: "8146462294",
     delivery_time_frame: "2021-10-04 - 2021-11-14",
    distance: "4.3 km",
    time_stamp: "2021-10-25 16:12:32"
  },

  {
    date_listed: "4 hours ago",
    delivery_id: "8146462294",
    delivery_time_frame: "2021-10-25 - 2021-10-31",
    distance: "4.3 km",
    time_stamp: "2021-10-25 16:12:32"
  },

  {
    date_listed: "4 hours ago",
    delivery_id: "8146462294",
    delivery_time_frame: "2021-10-04 - 2021-11-14",
    distance: "4.3 km",
    time_stamp: "2021-10-25 16:12:32"
  }
];

  return (
    <div className="App">
     
      {[
        ...new Set(Defaultdata.map((a) => a.delivery_time_frame.substr(0, 10)))
      ].map((dates, i) => (
        <label style={{ listStyle: "none" }} key={i}>
          <input
            type="checkbox"
            value={dates}
          />
          <span>{dates}({dates.length})</span>
        </label>
      ))}
  
    </div>
  );
}

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-10T17:19:02.206Z

You can first create a hook useFilteredValuesAndCounts which will return an object that contain dataSet and countObj.

1) dataSet will contain unique dates

2) countObj is an object which contain occurrence of each date

Live Demo

function useFilteredValuesAndCounts(arr) {
  const countObj = {};
  const set = new Set();

  arr.forEach((a) => {
    const date = a.delivery_time_frame.substr(0, 10);
    countObj[date] = (countObj[date] ?? 0) + 1;
    set.add(date);
  });

  return { dataSet: [...set], countObj };
}

export default useFilteredValuesAndCounts;

and in JSX you can simply use as:

const { dataSet, countObj } = useFilteredValuesAndCounts(Defaultdata);

return (
  <div className="App">
    {dataSet.map((dates, i) => (
      <label style={{ listStyle: "none" }} key={i}>
        <input type="checkbox" value={dates} />
        <span>
          {dates}({countObj[dates]})
        </span>
      </label>
    ))}
  </div>
);

0

281

Getting the number of times an item appears in an array before getting the unique values in React Code not working

1 answers

0

Find remote jobs

Andres GPT