React-native: группировать данные по дате и отображать их как пункты повестки дня

Question

Я хочу сгруппировать данные на основе даты и показать значение даты и их описание, как показано ниже. Идея состоит в том, чтобы сделать экран повестки дня как iPhone календари.

мои данные будут выглядеть так:

  const events = [
    { date: "2020-04-19", description: "Meeting", startTime: "11:00", endTime: "12:00" },
    { date: "2020-04-19", description: "Coference", startTime: "18:00", endTime: "19:00" },
    { date: "2020-04-20", description: "Team Coference", startTime: "18:00", endTime: "19:00" },
    { date: "2020-04-21", description: "Happy hour cocktail", },
    { date: "2020-04-22", description: "MEditation Class", },
    { date: "2020-04-24", description: "MEditation Class", },
  ]

Текущая функция:

  function renderEventList() {
  let today = moment().format("YYYY-MM-DD")
  let tomorrow = moment().add(1, 'days').format("YYYY-MM-DD");
   return events.map((d, key) => {
      console.log("data1" , d);
      return ( 
        <View>
          <View>
            <Text>
              {d.date === today ? "Today" : 
              d.date === tomorrow ? "Tomorrow" :
              d.date}
            </Text>
          </View>

          <Text>{d.description}</Text>
        </View>
      )
    })
  }

Текущий результат:

Ожидаемый результат (я буду управлять его стайлингом)

Answer 1

Я собрал пример CodeSandbox React, используя ваши фиктивные данные. Вы можете проверить это здесь .

Я написал там функцию под названием groupBy, которая, вероятно, то, что вы ищете. Он работает подобно методу loda sh groupBy , который вы можете использовать, если у вас все в порядке с добавлением loda sh в ваш проект.

Кстати, вот эта функция groupBy в действие:

const events = [
    { date: "2020-04-19", description: "Meeting", startTime: "11:00", endTime: "12:00" },
    { date: "2020-04-19", description: "Coference", startTime: "18:00", endTime: "19:00" },
    { date: "2020-04-20", description: "Team Coference", startTime: "18:00", endTime: "19:00" },
    { date: "2020-04-21", description: "Happy hour cocktail" },
    { date: "2020-04-22", description: "MEditation Class" },
    { date: "2020-04-24", description: "MEditation Class" },
];

const groupBy = (arr, criteria) =>
    arr.reduce((obj, item) => {
        let key = typeof criteria === "function" ? criteria(item) : item[criteria];
        if (!obj.hasOwnProperty(key)) obj[key] = [];
        obj[key].push(item);
        return obj;
    }, {});
    
const grouped = groupBy(events, "date");

console.log(grouped);
    

Надеюсь, это поможет,

Ура! 101