React: render objects based on value type

Issue

I have an object array with a structure similar to this:

export interface obj {
id: number,
date: string,
source: string,
}

const obj: obj[] | undefined = [
  { id: 1, date: "2021-01-17", source: "data" },
  { id: 2, date: "2021-11-23", source: "data" },
  { id: 3, date: "2020-05-03", source: "draft" },
  { id: 4, date: "2022-09-08", source: "draft" },
  { id: 5, date: "2021-12-04", source: "data" },
  { id: 6, date: "2021-09-08", source: "empty" },
];

const [objectData, setObjectData] = useState<obj[]>(); 

I'm trying to return and render the first occuranses of each source type, sorted by the nearest date. So in the example above I'd like to return the object with id: 5 for "data", id: 4 for "draft" and id: 6 for "empty".

This is what I got so far:

Sorting object by dates descending in useEffect and store variable in useState

const sortByDate = obj?.slice().sort((a, b) => {
  return b.date.valueOf() - a.date.valueOf();
})

And then trying to map out my component like so:

{objectData?.map((m) =>
  m.source === "draft" ? (
    <Data id={m.id} date={m.date} source={m.source} />
  ) : m.applicationType === "data" ? (
    <Data id={m.id} date={m.date} source={m.source} />
  ) : m.applicationType === "empty" ? (
    <Data id={m.id} date={m.date} source={m.source} />
  )
)}

But this will ofcourse render out every object..How can I render out only the one instance of each object source type that i want?

Solution

Given your approach, I would a) Sort the items in the list in a descending manner. b) Create a list of possible unique source names c) Render the unqiue source names and get the first item matching the source name in my descending ordered array.

You can get rid of b) if you want to define your list of source names statically. If that is the case, you need to handle if there is no item found with the source name that is selectecd.

const items = [
  { id: 1, date: "2021-01-17", source: "data" },
  { id: 2, date: "2021-11-23", source: "data" },
  { id: 3, date: "2020-05-03", source: "draft" },
  { id: 4, date: "2022-09-08", source: "draft" },
  { id: 5, date: "2021-12-04", source: "data" },
  { id: 6, date: "2021-09-08", source: "empty" },
];


// a) Sort the array with date object (descending)
const sortedArray = items.sort((a, b) => {
  return new Date(b.date).valueOf() - new Date(a.date).valueOf();
});


// b) This will let you get all possible sources dynamically and create an array of unique entries
const uniqueSources = [...new Set(sortedArray.map(item => item.source))];

// c) Map over (existing) unqiue entries in the sorted list and get the first one found
uniqueSources.map((source) => {
  const firstObject = sortedArray.find((entry) => entry.source === source);
  console.log('source:', source, firstObject);
});

Answered By - grenzbotin