0

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.

Ferran Buireu
  • 28,630
  • 6
  • 39
  • 67
Jaacoubi
  • 97
  • 6
  • You are using `allBlogs.nodes.slice(0, Math.round(allBlogs.nodes.length/2)).map(...)` like a for-loop. If you aren't going to make use of the `node` it would be better to avoid using `.map()` – DBS Jun 16 '22 at 12:32
  • define a state which is an index. then initialize it with zero. any time user moves the carousel you increment the index by 2. then map only elements in (index, index + 2) – Fatemeh Karimi Jun 16 '22 at 12:33
  • @DBS what should I use in this case instead of map – Jaacoubi Jun 16 '22 at 12:41

1 Answers1

1

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>))
Steffen Frank
  • 1,220
  • 7
  • 14