How can I map an array inside a carousel in react

June 16, 2022

I am fetching an array from my database , I am trying to map it in carousel, each slide must have 2 elements ,the next slide is 2 elements as well and so forth. I will explain this in the codes .
This is the JSON format of the array :

{
  "data": {
    "allPrismicBlog": {
      "nodes": [
        {
          "data": {
            "author": "Darius Aeres",
            "date": "15 Aug 2022"
          }
        },
        {
          "data": {
            "author": "Ahmed Jalal",
            "date": "13 June 2022"
          }
        },
        {
          "data": {
            "author": "Djalal Aymani",
            "date": "8 June 2022"
          }
        },
        {
          "data": {
            "author": "Jane Cooper",
            "date": "3 Aug 20"
          }
        },
        {
          "data": {
            "author": "Khalid Sayed",
            "date": "16 Aug 2022"
          }
        },
        {
          "data": {
            "author": "Mohammed Yaakoubi",
            "date": "1 July 2022"
          }
        },
        {
          "data": {
            "author": "Karim Baghta",
            "date": "5 May 2022"
          }
        },
        {
          "data": {
            "author": "Jacob Sefrioui",
            "date": "15 Aug 2022"
          }
        }
      ]
    }
  },
  "extensions": {}
}

and this is how I am trying to map the slides:

<Carousel>
  {allBlogs.nodes.slice(0, Math.round(allBlogs.nodes.length/2)).map((node,index)=>
     (
      <Slide>
        {allBlogs.nodes.slice(index, 2).map((blog)=>
      (
       <BlogAuthor>
              <Author>{blog.data.author}</Author>
              <BlogDate>{blog.data.date}</BlogDate>
            </BlogAuthor>
      )
     )}
   </Slide>
 )}
</Carousel>

So in this array mapping is working kind of intended , but the mistake is I don’t get all my blog , for example in the first slide it will display the 2 first elements of the array successfully , in the second slide it will get only a single element and it will have the index of the first slide’s last element (1) .
I need a way to fix this to display in every slide 2 elements from the array accordingly !
I hope you did understand this question.

>Solution :

I think you are trying to use slice to split the array nodes into pairs of two – but that’s not how slice works. It will give you just one array which is a subset of nodes.

Look at this answer to see how to split an array into pairs of two elements each:

const nodePairs = allBlogs.nodes.reduce(
 (result, value, index, array) => {
    if (index % 2 === 0)
      result.push(array.slice(index, index + 2));
    return result;
  }, []);

Use this function on your nodes array and then iterate over the pairs:

nodePairs.map(pair => (
  <Slide>
    {pair.map((blog) => (
      <BlogAuthor>
        <Author>{blog.data.author}</Author>
        <BlogDate>{blog.data.date}</BlogDate>
      </BlogAuthor>)
    }
</Slide>))