Разбить массив объектов из файла JSON, разделить и отобразить в цикле для 2-х гладких каруселей реагировать

Question

Я хотел бы сделать 2 слайдера с одинаковым циклом массива, массив должен быть разделен на 2, и 2 слайдера отобразятся.Я не уверен, как это сделать.

Ниже приведен текущий код:

Slider.js

import React, { Component } from 'react';
import Slider from "react-slick";
    const slidersettings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 4,
      slidesToScroll: 4
    };
    class CelebSlider extends Component {
          render() {
            let celebArray = [];
            let celebrity = this.props.items.celebrity
            for (let key in celebrity) {
              celebArray.push(celebrity[key]);
                return (
                <section>
                <div className="row">
                <div className="col-md-9">  
                <Slider {...slidersettings}>
                {this.props.items.celebrity.map((item) => (
                        <div key={item.id} className="slider-item">
                            <a href="#"><img src={item.image_url} className="img-responsive"/></a>
                            <strong>{item.name}</strong>
                        </div>
                    ))}  
                </Slider>
                </div>
                </div>        
                </section>
                );
            }
            if (this.props.hasErrored) {
                return <p>Sorry! There was an error loading the items</p>;
            }

            if (this.props.isLoading) {
                return <p>Loading…</p>;
            }
            return (null);

          }
        }

Ниже приведена иллюстрация того, что необходимо:

Answer 1

Я добился этого, используя приведенный ниже код для обоих слайдеров:

{this.props.items.celebrity.slice(0, Math.ceil(celebrity.length / 2)).map((item) => (
<a href="#"><img src={item.image_url} className="img-responsive" /></a>
))}

{this.props.items.celebrity.slice(celebrity.length / 2).map((item) => (
<a href="#"><img src={item.image_url} className="img-responsive" /></a>
))}