How to add SectionList 's sections in React Native from an array

Question

I have an array of objects called movies (const movies = movie[]). A movie has the following properties:

  movie: {
    name: string;
    description: string;
    date: Date;
    duration: number
  }

I want to use a RN SectionList component, making sections from the movie.date (Day):

**20 june 2020:**

Movie name | description | duration

Movie name | description | duration

**18 april 2020:**

Movie name | description | duration

Movie name | description | duration

...

How do I make the section and also how do I group my movies' array by date? I'm using lodash, but doing const groupedMovies = groupBy(movies, movie => movie.date); returns a collection and not an array.

ref.: https://reactnative.dev/docs/sectionlist

Answer 1

So you need to convert the data from the format

{
   "18 april 2020": [{...}, {...}, {...}],
   ...
}

into the format

[
   { "title": "18 April 2020", "data": [{...}, {...}, {...}] },
   ...
]

you can do this conversion as follows

const groupedMovies = groupBy(movies, movie => movie.date);
let data = Object.entries(groupedMovies).map(([key, value]) => ({ title: key, data: value }))

or with lodash's map

const groupedMovies = groupBy(movies, movie => movie.date);
let data = map(groupedMovies, (value, key) => ({ title: key, data: value }))