Рендеринг данных из JSON ReactJS: данные не отображаются в виде столбцов

Я работаю над созданием веб-приложения с использованием reactJS. Мы должны отобразить продукт, на который подписались пользователи, в виде таблицы. Например, вот ответ:

{
    "data" : [
        {
          "user": "user1",
          "subscriptions": [
          {
             " productid":1,
             " productname":"user1_product_1",
           "productIdvalue" : 20
          }, {
            " productid":2,
            " productname":"user1_product_2",
          "productIdvalue" : 25
         }]
        },
        {
            "user": "user2",
            "subscriptions": [
                {
                    " productid":1,
                    " productname":"user2_product_1",
                  "productIdvalue" : 20
                 }, {
                    " productid":2,
                    " productname":"user2_product_2",
                  "productIdvalue" : 30
                 }, {
                    " productid":3,
                    " productname":"user2_product_3",
                  "productIdvalue" : 20
                 }, {
                    " productid":4,
                    " productname":"user2_product_4",
                  "productIdvalue" : 20
                 }]
        }
      ]
}

Таким образом, данные подписки являются динамическими. Как я могу отобразить приведенные выше данные в табличных данных следующим образом: Макет Пользователь может подписаться на любое количество продуктов. На данный момент у нас нет пользователей, которые подписались более чем на 4 продукта.

Я реализовал код, как показано ниже:

class Example2 extends Component {
    render() {
        return (
      <table>
            <div>
                {
                    data.data.map((data, i) => {
                        return (
                            <tr key = {i}>
                  {data.subscriptions.map(function (subscription, i) { 
                                                return <div key = {i}>
                          <td>{subscription.productname}</td>
                          <td>{subscription.productIdvalue}</td>
                                                </div>
                                            })}
                            </tr>
                        );
                    })
                }
            </div>
            </table>
        );
    }
} 
export default Example2;

В приведенном выше коде каждый «td» отображается в новой строке. Пожалуйста, дайте мне знать, как исправить мой код.