React Преобразование объекта в массив при переборе элементов через map?

Question

Подскажите пожалуйста, как разобрать объект для вывода его значений в элементы списка. Вот простой пример

import React from "react";
import BonusItem from "./BonusItem";

function Bonuses({ bonusesStatus }) {
  const objectMap = (obj, fn) =>
    Object.fromEntries(
      Object.entries(obj).map(([k, v], i) => [k, fn(v, k, i)])
    );

  let BonusesList = objectMap(bonusesStatus, (el) => (
    <BonusItem
      index={el.index}
      key={el.index}
      isAccess={el.isAccess}
      bonusesLastUpdate={el.bonusesLastUpdate}
      bonusesNextAccess={el.bonusesNextAccess}
    />
  ));
  BonusesList = Object.entries(BonusesList); //// Конвертирую obj => arr

  console.log("BonusesList =", BonusesList);

  return (
    <BonusItem
      bonusName={bonusesStatus[1].bonusName}
      isAccess={bonusesStatus[1].isAccess}
      bonusesLastUpdate={bonusesStatus[1].bonusesLastUpdate}
      bonusesNextAccess={bonusesStatus[1].bonusesNextAccess}
    /> /// Пример для первого бонуса

    // <BonusesList/>  Как вывести  все бонусы ?
  );
}

export default Bonuses;

Подскажите, пожалуйста, как из bonusesStatus вывести все элементы бонусов ? (Первый элемент списка вывел в качестве примера) Была проба преобразовать объект в массив, но почему-то вывод не происходит. Код уходит с ошибкой.

Answer 1

Вариант 0 - классика, но без сортировки

Вариант 1 - сортировка по ключам

Вариант 2 - сортировка по ключу, bonusesLastUpdate для примера

const bonusesStatus = {
  1: { bonusName: "bonusName1", isAccess: false, bonusesLastUpdate: "2021-05-15T15:04:23.000Z", bonusesNextAccess: "2021-06-17T15:04:23.000Z", isFree: true, counter: 0 },
  2: { bonusName: "bonusName2", isAccess: false, bonusesLastUpdate: "2021-05-22T15:04:23.000Z", bonusesNextAccess: "2021-05-23T15:04:23.000Z", isFree: true, counter: 0 },
  3: { bonusName: "bonusName3", isAccess: true, bonusesLastUpdate: "2021-05-15T11:04:23.000Z", bonusesNextAccess: "2021-05-23T13:04:23.000Z", isFree: true, counter: 0 },
  4: { bonusName: "bonusName4", isAccess: true, bonusesLastUpdate: "2021-05-15T15:04:23.000Z", bonusesNextAccess: "2021-09-15T15:04:23.000Z", isFree: false, counter: 0 },
  5: { bonusName: "bonusName5", isAccess: true, bonusesLastUpdate: "2021-05-15T15:04:23.000Z", bonusesNextAccess: "2021-07-15T15:04:23.000Z", isFree: false, counter: 0 }
};

// Вариант 0 (классика, но без сортировки)
const q0 = Object.values(bonusesStatus);
console.log(q0);

// Вариант 1 (сортировка по ключам)
const q1 = Object.keys(bonusesStatus)
  .sort((a, b) => +a - +b).map((key) => bonusesStatus[key]);
console.log(q1);

// Вариант 2 (сортировка по ключу, bonusesLastUpdate для примера)
const q2 = Object.values(bonusesStatus)
  .sort((a, b) => a.bonusesLastUpdate.localeCompare(b.bonusesLastUpdate));
console.log(q2);

БЛОГ НА HUSL

React Преобразование объекта в массив при переборе элементов через map?

Ответы (1 шт):