Как правильно отрендерить данные на react с разрывом?

Question

[s24344]

Здравствуйте. Подскажите, пожалуйста, как правильно реализовать следующий вывод.
Приведу стандартный пример вывода данных:
app.js

import React from 'react'
import ReactDOM from 'react-dom'
import AppReact from './app-react'

const data = [
  {
    id: 1,
    title: 'item1',
    round: [
      {id: 1, total: 1000},
      {id: 2, total: 2000}
    ]
  },
  {
    id: 2,
    title: 'item2',
    round: [
      {id: 1, total: 3000},
      {id: 2, total: 4000}
    ]
  },
  {
    id: 3,
    title: 'item3',
    round: [
      {id: 1, total: 5000},
      {id: 2, total: 6000}
    ]
  },
  {
    id: 4,
    title: 'item4',
    round: [
      {id: 1, total: 7000},
      {id: 2, total: 8000}
    ]
  },
  {
    id: 5,
    title: 'item5',
    round: [
      {id: 1, total: 9000},
      {id: 2, total: 10000}
    ]
  },
  {
    id: 6,
    title: 'item6',
    round: [
      {id: 1, total: 11000},
      {id: 2, total: 12000}
    ]
  },
  {
    id: 7,
    title: 'item7',
    round: [
      {id: 1, total: 13000},
      {id: 2, total: 14000}
    ]
  },
  {
    id: 8,
    title: 'item8',
    round: [
      {id: 1, total: 15000},
      {id: 2, total: 16000}
    ]
  }
]

ReactDOM.render(
  <AppReact data={data} />,
  document.getElementById('react-root')
)

app-react.js

import React from 'react'

class AppReact extends React.Component {
  constructor(props) {
    super(props)
    console.log(props.data);
  }

  render() {
    return (
      <div>
        {
          this.props.data.map((item) => {
            console.log('item', item);
            return (
              <div key={item.id}>
                {item.title}
                {item.round.map((r) => {
                  console.log('r', r);
                  return (
                    <div key={r.id}>
                      {r.total}
                    </div>
                  )
                })}
              </div>
            )
          })
        }
      </div>
    )
  }
}

export default AppReact;

Подскажите, пожалуйста. Как мне сделать вывод например: первых трех элементов массива (объектов). А затем с четвертого и до конца.
Вывод в html:

item1
1000
2000
item2
3000
4000
item3
5000
6000

разделитель

item4
7000
8000
item5
9000
10000
item6
11000
12000
item7
13000
14000
item8
15000
16000

Answer 1

[0xD34F]

Сделайте отдельный компонент для вывода данных и создайте два его экземпляра: первому передаёте первые три элемента, а второму - все оставшиеся. Как-то так:

const DataList = ({ data }) => (
  <div>
    {data.map((item) => (
      <div key={item.id}>
        {item.title}
        {item.round.map((r) => <div key={r.id}>{r.total}</div>)}
      </div>
    ))}
  </div>
);

<DataList data={props.data.slice(0, 3)} />
<Separator />
<DataList data={props.data.slice(3)} />

Answer 2

[Иван]

добавляем разделитель по нужному индексу:

import { Fragment } from 'react'; // подключаем react fragment
....
// перед 3-им индексом, вставляем разделитель, индексы нумеруются от 0
render() {
  return (
    <div>
      {
        this.props.data.map((item, index) => {
          console.log('item', item);
          return (
            <Fragment key={item.id}>
              {index === 3 && ( 
                <div>
                  разделитель
                </div>
              )}
              <div key={item.id}>
                {item.title}
                {item.round.map((r) => {
                  console.log('r', r);
                  return (
                    <div key={r.id}>
                      {r.total}
                    </div>
                  )
                })}
              </div>
            </Fragment>
          )
        })
      }
    </div>
  )
}

Answer 3

[Андрей Охотников]

Функция map кроме item также принимает в себя индекс элемента, достаточно при рендере проверять индекс и вставлять разделитель, например как написал Иван Иван Иван