具有嵌套行的表

有一个表格，其中呈现产品组：

当您单击一行时，应向其添加更多行（组打开），如下所示：

_{（点击蓝线呈现 2 条红线）}

我正在尝试这样做：

import React from "react";

class App extends React.Component {
    renderGroups(groups) {
        return groups.map(({ group: { name } }, index) => (
            <tr key={index} className="group" onClick={this.onGroupToggle}>
                <td>{name}</td>
                <td>g-1.1</td>
                <td>g-1.2</td>
                <td>g-1.3</td>
                <td>g-1.4</td>
                <td>g-1.5</td>
            </tr>
        ));
    }

    renderProducts(products) {
        return products.map(({ name }) => (
            <tr key={index} className="product">
                <td>{name}</td>
                <td>g-1.1</td>
                <td>g-1.2</td>
                <td>g-1.3</td>
                <td>g-1.4</td>
                <td>g-1.5</td>
            </tr>
        ));
    }

    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 (
            <table border="1">
                <thead>
                    <tr>
                        <th>name</th>
                        <th>1</th>
                        <th>2</th>
                        <th>3</th>
                        <th>4</th>
                        <th>5</th>
                    </tr>
                </thead>
                <tbody>
                {this.renderGroups(groups)}
                </tbody>
            </table>
        );
    }
}

App.propTypes = {
  example: React.PropTypes.object
};

export default App;

如何在 React 中正确实现它，因为我无法在 renderGroups 中返回 2 tr。

renderProducts(products) {
    return products.map(({ name }) => (
        <tr key={index} className="group">
            <td>{name}</td>
            <td>g-1.1</td>
            <td>g-1.2</td>
            <td>g-1.3</td>
            <td>g-1.4</td>
            <td>g-1.5</td>
        </tr>
        <tr key={index} className="product">
            <td>{name}</td>
            <td>g-1.1</td>
            <td>g-1.2</td>
            <td>g-1.3</td>
            <td>g-1.4</td>
            <td>g-1.5</td>
        </tr>
        <tr key={index} className="product">
            <td>{name}</td>
            <td>g-1.1</td>
            <td>g-1.2</td>
            <td>g-1.3</td>
            <td>g-1.4</td>
            <td>g-1.5</td>
        </tr>
    ));
}

怎么做才对？

更新

示例：有一个 Tables 组件接受一个 TableRows 组件作为道具，该组件呈现表格中的所有行（在该组件内，我用 tbody 中的组名称和产品行包装一个字符串），但是如果该组件返回几个“ tbody" fidl自然会返回一个错误

TableRows.render()：必须返回一个有效的 ReactComponent。您可能返回了未定义、数组或其他一些无效对象。