Итерация по вложенному объекту, который является динамическим

Question

У меня есть следующий список:

const list = [
    {
        id: '1',
        task: 'task 1',
        activities: [{
            'swimming': false,
            'tennis': false,
            'football': false,
            'basketball': false
        }],
        allCompleted: false
    },
    {
        id: '2',
        task: 'task 2',
        activities: [{
            'soccer': false,
            'rugby': false,
            'golf': false,
            'baseball': false
        }],
        allCompleted: false
    },
    {
        id: '3',
        task: 'task 3',
        activities: [{
            'hockey': false,
            'netball': false,
            'softball': false,
            'surfing': false
        }],
        allCompleted: false
    }
];

Однако, когда я использую:

<ul>
    {list.map(item => (
        <li key={item.id}>
           {item.task}
           <ul>
               <li>{item.activities}</li>
           </ul>
        </li>
    ))}
</ul>

Я получаю Objects are not valid as a React child ошибку.

Я пытаюсьвыполнить итерацию по списку для отображения имени задачи и любых действий, которые с ней связаны:

• задание 1
  • плавание
  • теннис
  • футбол
  • баскетбол
• задание 2
  • футбол
  • регби
  • гольф
  • бейсбол
• задача 3
  • хоккей
  • нетбол
  • софтбол
  • серфинг

Как я могу произвести вывод выше?

Я буду использовать значение false/true для каждого действия позже, когда пользователь выберет элемент в списке.

Answer 1

Вы получаете ошибку, потому что item.activities - это массив объектов, и вы не можете визуализировать объект напрямую.

Вместо этого вам нужно перебрать ключи объекта

<ul>
    {list.map(item => (
        <li key={item.id}>
           {item.task}
           <ul>
               {Object.keys(item.activities[0]).map(act => <li>{act}</li>)}
           </ul>
        </li>
    ))}
</ul>