Таблица с вложенными строками

Есть таблица, в ней рендерятся группы товаров:

При клике на строку в ней должно добавляться еще несколько строк (раскрывается группа), вот так:

(при клике на синюю строку отрендерилось еще 2 красных строки)
Пытаюсь это сделать так:
import React from "react";
class App extends React.Component { renderGroups(groups) { return groups.map(({ group: { name } }, index) => ( {name} g-1.1 g-1.2 g-1.3 g-1.4 g-1.5 )); }
renderProducts(products) { return products.map(({ name }) => ( {name} g-1.1 g-1.2 g-1.3 g-1.4 g-1.5 )); }
onGroupToggle() { console.log("onGroupToggle"); // какие то непонятные действия // которые должны привести к инжекту tr.product после tr.group }
render() { const groups = [ { group: { group_id: 1, name: 'Телефоны' }, products: [ { product_id: 1, name: 'iPhone 7' }, { product_id: 1, name: 'iPhone 7 Plus' } ] } ];
return (

{this.renderGroups(groups)}

name	1	2	3	4	5

); } }
App.propTypes = { example: React.PropTypes.object };
export default App;
Как это правильно реализовать на React, ведь я не могу внутри renderGroups возвращать 2 tr.
renderProducts(products) { return products.map(({ name }) => ( {name} g-1.1 g-1.2 g-1.3 g-1.4 g-1.5 {name} g-1.1 g-1.2 g-1.3 g-1.4 g-1.5 {name} g-1.1 g-1.2 g-1.3 g-1.4 g-1.5 )); }
Как правильно это сделать?
UPDATE
Пример: есть компонент Tables который принимает в качестве props'а компонент TableRows который рендерит все строки в таблице (внутри этого компонента я оборачиваю в tbody строку с названием группы и строки продуктов) но если этот компонет возвращает несколько "tbody" фидл естествено возвращает ошибку
TableRows.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

Ответ

Стандартный хак этого ограничения для случая когда нужно возвращать несколько строк таблицы - обернуть эти строки в tbody и вернуть из render эту обертку. tbody в таблице может быть несколько и структура не будет сильно изменена.
Вроде того:
renderMultipleRows(){ return }
Также можно вернуть из функции (но не метода render реакт компонента!) массив jsx узлов. В этом случае стоит назначить каждому узлу key исходя из семантики узлов, иначе реакт будет плеваться ворнингами.
const AwesomeComponent = React.createClass({ renderRows: function(){ return [ , ] },
render: function(){ return {this.renderRows()} } });