Best way to get the first 3 elements looping through an array in React?

Question

What is the best way to get the first 3 elements looping through that React array?

const elements = [
  {id:1, label:"1", value:1},
  {id:2, label:"2", value:2},
  {id:3, label:"3", value:3},
  {id:4, label:"4", value:4},
  {id:5, label:"3", value:5},
  {id:6, label:"3", value:6}
];

Does this answer your question? [How to get first N number of elements from an array](https://stackoverflow.com/questions/34883068/how-to-get-first-n-number-of-elements-from-an-array) — Ajeet Shah, Apr 14 '21 at 09:10
If below answers are useful, click the upvote button (▲) to the left of it. If any answered your question, click the checkmark (✓) to accept it (once the system allows that). That way others know that you've been (sufficiently) helped. Also see [What should I do when someone answers my question?](https://stackoverflow.com/help/someone-answers) — Ajeet Shah, Apr 17 '21 at 12:19

Ravi Chaudhary · Answer 1 · 2021-04-13T21:51:23.193

If it's ok to mutate the original array,

const elements = [
      {id:1, label:"1", value:1},
      {id:2, label:"2", value:2},
      {id:3, label:"3", value:3},
      {id:4, label:"4", value:4},
      {id:5, label:"3", value:5},
      {id:6, label:"3", value:6}
    ];
elements.length = 3;
console.log(elements);

If it's ok to mutate the original array but instead of just first 3 or first n elements, you might want to pick a window, splice would give you much more flexibility. More details

const elements = [
      {id:1, label:"1", value:1},
      {id:2, label:"2", value:2},
      {id:3, label:"3", value:3},
      {id:4, label:"4", value:4},
      {id:5, label:"3", value:5},
      {id:6, label:"3", value:6}
    ];
elements.splice(3);
console.log(elements);

If mutating the original array is not desired, then slice is your friend. More details

const elements = [
      {id:1, label:"1", value:1},
      {id:2, label:"2", value:2},
      {id:3, label:"3", value:3},
      {id:4, label:"4", value:4},
      {id:5, label:"3", value:5},
      {id:6, label:"3", value:6}
    ];
const newElements = elements.slice(0, 3);
console.log(newElements);

score 0 · Answer 2 · answered Apr 13 '21 at 21:21

Your preset needs fixes since it's key: value pairs in object, not key=value.

But you can use .slice(start, length) for getting the certain amount of results:

const elements = [{
    id: 1,
    label: "1",
    value: 1
  },
  {
    id: 2,
    label: "2",
    value: 2
  },
  {
    id: 3,
    label: "3",
    value: 3
  },
  {
    id: 4,
    label: "4",
    value: 4
  },
  {
    id: 5,
    label: "3",
    value: 5
  },
  {
    id: 6,
    label: "3",
    value: 6
  }
];

console.log(elements.slice(0,3));

score 0 · Answer 3 · answered Apr 13 '21 at 21:21

you can use splice function

const elements = [ 
  {id:1, label:"1", value :1},
  {id:2, label:"2", value :2},
  {id:3, label:"3", value:3},
  {id:4, label:"4", value:4},
  {id:5, label:"3", value:5},
  {id:6, label:"3", value:6}
]

const first_tree=elements.splice(0,3)
console.log(first_tree)

score 0 · Answer 4 · answered Apr 14 '21 at 08:58

Use destructuring:

const elements = [{id:1, label:"1", value:1},{id:2, label:"2", value:2},{id:3, label:"3", value:3},{id:4, label:"4", value:4},{id:5, label:"5", value:5},{id:6, label:"6", value:6}];
const [one, two, three] = elements;
console.log(one, two, three);

Or slice:

{elements.slice(0, 3).map((item) => (
  <div key={item.id}>{item.label}</div>
))}

Best way to get the first 3 elements looping through an array in React?

4 Answers4