Здравствуйте. Подскажите, пожалуйста, как правильно реализовать следующий вывод.
Приведу стандартный пример вывода данных:
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 |