How can I map an array inside a carousel in react

Question

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.

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
– DBS, Commented Jun 16, 2022 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
– Fatemeh Karimi, Commented Jun 16, 2022 at 12:33

Steffen Frank · Accepted Answer · 2022-06-16 12:57:24Z

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>))

edited Jun 16, 2022 at 12:57

answered Jun 16, 2022 at 12:40

Steffen Frank

1,9179 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jaacoubi Over a year ago

Thanks ! what's the initialArray and the nodePairs in my case please ?

Steffen Frank Over a year ago

I edited my answer to make it more clear how the function in the answer I referred to maps to your problem. I hope it helps.

Collectives™ on Stack Overflow

How can I map an array inside a carousel in react

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related