• python
  • javascript
  • reactjs
  • sql
  • c#
  • java
Facebook Twitter Instagram
Devs Fixed
  • python
  • javascript
  • reactjs
  • sql
  • c#
  • java
Devs Fixed
Home ยป Resolved: mapping an array in react

Resolved: mapping an array in react

0
By Isaac Tonny on 16/06/2022 Issue
Share
Facebook Twitter LinkedIn

Question:

I am fetching an array from a database , the array has strings , and it displays all the desirable elements accordingly like this :
 {blogs.nodes.map((ts)=>
<Component ts={ts} />
)}
what I want exactly is to display only the round of the whole array divided by 2 .Instead of displaying this component 8 times for example , it must displayed only 4 times. this is my array :
{
  "data": {
    "blogs": {
      "nodes": [
        {
          "id": "4a007c39-2053-5c5e-8f38-56ba8c3aced5"
        },
        {
          "id": "9e78be5c-08e7-5684-adaa-b788cb4020b7"
        },
        {
          "id": "f5d3055d-9575-5840-b8d7-b55779671417"
        },
        {
          "id": "00d504ef-458f-5830-8d0e-ae91d33fadc4"
        },
        {
          "id": "a02cb1ae-b4bd-5978-afbf-3c91f6473ae2"
        },
        {
          "id": "b4daa0f7-4249-5bf2-b82d-143811329639"
        },
        {
          "id": "3ebda83d-293c-56ed-9b71-b8d318036086"
        },
        {
          "id": "3d46370e-f574-5be6-83a1-c0386d19b17d"
        }
      ]
    }
  },
  "extensions": {}
}

Answer:

let half = blogs.nodes.length % 2 
blogs.nodes.slice(0, half).map((node) => {
        return <Component key={node.id} item={node} />
   });
Original Question and answer here

If you have better answer, please add a comment about this, thank you!

javascript reactjs
Share. Facebook Twitter LinkedIn

Related Posts

Resolved: Visual Studio 2022 crashes when using breakpoints

24/03/2023

Resolved: How to get Union type from an array of objects in Flow?

24/03/2023

Resolved: Modify entity using Action in C#

24/03/2023

Leave A Reply

© 2023 DEVSFIX.COM

Type above and press Enter to search. Press Esc to cancel.