Как сгенерировать таблицу?

Question

[Username]

Есть однострочная таблица в которой 7 столбцов, необходимо сгенерировать таблицу, где в каждом td могут быть div элементы.
Пример:

var data = [
	{
		td: 1,
		text, 'One-1'
	},
	{
		td: 1,
		text, 'Two-1'
	},
	{
		td: 3,
		text, 'One-3'
	},
	{
		td: 3,
		text, 'One-3'
	}
];

Опираясь на массив объектов data, таблица должна выглядеть следующем образом:

<table>
  <tr>
    <td><!--1-->
      <div class="block"></div>
      <div class="block"></div>
    </td>
    <td></td><!--2-->
    <td><!--3-->
      <div class="block"></div>
    </td>
    <td></td><!--4-->
    <td></td><!--5-->
    <td></td><!--6-->
    <td></td><!--7-->
  </tr>
</table>

Я хотел сделать так, создать массив и в i-ую позицию массива вставлять вёрстку , потом делать перебор по этому массиву и уже i-ый элемент массива вставлять в нужную td.

var ScheduleRecord = React.createClass({
    render: function () {
        var recordTemplate = [], i = 0, scheduleRecord;
        var data = this.props.data;

        recordTemplate[data[i].td] = data.map(function (item, index) {
            i++;
            return (
                <div key={index} className="record-block">
                    {item.text}
                </div>
            )
        });

        scheduleRecord = recordTemplate.map(function (item, index) {
            return (
                <td className="schedule-blocks" key={index}>
                    {item}
                </td>
            )
        });

        return (
            <tr>
                {scheduleRecord}
            </tr>
        );
    }
});

Но к сожалению я не могу записывать в i-ую позицию, т.к. не могу обновить i
data[i].td

Answer 1

[Username]

Сделал следующим образом:

for (var i = 0; i < data.length; i++) {
            recordTemplate[data[i].day - 1] = data.map(function (item, index) {
                return (
                    <div key={index} className="record-block"
                         style={{top: '96px', height: (item.service.duration * 48) / 60}}>
                        {item.begin_date}
                    </div>
                )
            });
        }