Реагировать JS: отображать только определенные элементы массива в теге JSX, где элементы для отображения повторяются

Question

Я программно создал вышеуказанную таблицу в React, используя следующий код:

tableRenderer() {

    let table = <Table striped bordered hover responsive="sm" id='mytable'>
        <thead>
        <tr>
            {this.state.headers.map((header, index) =>
                <th key={index}>{header} </th>
            )}
        </tr>
        </thead>

            {this.state.timeLabels.map((label, index)=>
                <tr key={index}>   <td><b>{label} </b></td>
                    {this.state.table.slice(0,4).map((match, index)=>
                        <td key={index}>{match.teamA} vs {match.teamB}</td>
                    )}
                </tr> )}
                </Table>;

Однако я застрял на последнем функциональном элементе, который мне нужен: Как я могу изменить значение среза массива таблицы, чтобы при первом запуске он разрезал 0-> количество шагов, второй цикл - количество шагов-> количество шагов + количество шагов ... et c. Нужно ли создавать несколько функций, которые будут повторять переменную каждый раз, когда создается строка?

Answer 1

Это было бы что-то вроде:

{this.state.timeLabels.map((label, index)=> {
  const NO_OF_PITCHES = 4;
  let from = NO_OF_PITCHES * index;
  let to = NO_OF_PITCHES * (index + 1);

  return <tr key={index}>
    <td><b>{label}</b></td>
    {this.state.table.slice(from,to).map((match, index)=>
      <td key={index}>{match.teamA} vs {match.teamB}</td>
    )}
  </tr>)}
} 

, предполагая, что нарезка составляет 0,4 ... 4,8 ... 8,12 ... et c

также вы можете поднять NO_OF_PITCHES в родительский элемент функции карты, потому что ее не нужно создавать заново на каждой итерации