Отобразить элементы массива в subrow (реагировать-таблицу)

Question

Я использую реагирующую таблицу и мне нужно создать подстроки со структурой данных ниже.Я успешно создал subrows для каждого объекта в массиве данных.Тем не менее, каждый объект в массиве данных содержит другой массив «types».

Как мне заставить каждую строку перечислять имена «type» в виде subrows?

Пока мой кодниже:

Таблица:

import React from 'react';
import ReactTable from 'react-table';

const Table = (props) => {
  const subComponent = row => {
    return (
      <div>
        Names of "types" here respectively for each object in data array
        (no column headers or anything needed)
      </div>
    );
  };

  return (
    <ReactTable data={ props.data }
      columns={ props.columns }
      SubComponent={ subComponent } />
  );
};

export default Table;

Структура данных:

const data = [
  {
    id: '12345',
    name: 'sports',
    types: [
      {
        name: 'basketball',
        id: '1'
      },
      {
        name: 'soccer',
        id: '2'

      },
      {
        name: 'baseball',
        id: '3'
      }
    ]
  },
  {
    id: '678910',
    name: 'food',
    types: [
      {
        name: 'pizza',
        id: '4'
      },
      {
        name: 'hamburger',
        id: '5'

      },
      {
        name: 'salad',
        id: '6'
      }
    ]
  }
];

Answer 1

Вот хороший пример того, как это сделать https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/archives/v6-examples/react-table-sub-components

Судя по моим предположениям, ваш код будет выглядеть так:

import React from 'react';
import ReactTable from 'react-table';

const Table = (props) => {
  const subComponent = row => {
    return (
      <div>
        row.Original.types.map((type, idx) => (
           <div>{{type.id}}</div>
           <div>{{type.name}}</div>
        ))
      </div>
    );
  };

  return (
    <ReactTable data={ props.data }
      columns={ props.columns }
      SubComponent={ subComponent } />
  );
};

export default Table;