Returning iterations with React-Native

Question

I've been using React not too long, but I keep running into this issue while trying to avoid it every time.

Upon iterating through my forloop, it gives me two different iterations, as expected.

Output:

{name: "Sensor 1", type: "Airsensor"}

{name: "Sensor 2", type: "Watersensor"}

However, my code seems to be only using the second iteration.

Output on screen:

{name: "Sensor 2", type: "Watersensor"}

The code in question is:

export default function SensorCards() {
  let allCards = [
    {name: 'Sensor 1', type: 'Airsensor'},
    {name: 'Sensor 2', type: 'Watersensor'},
  ];

  for (let i = 0; i < allCards.length; i++) {
    var cardsOnScreen = allCards.map(function (card) {
      return ;
    });
  }
  return cardsOnScreen;
}

I keep trying to change the return to something else, because I think my issue lays there, however I can't seem to find an alternative for my situation. My return keeps only returning the last object x times in objects.

Thanks in advance!

user_298455 · Answer

Replace this:

  for (let i = 0; i < allCards.length; i++) {
    var cardsOnScreen = allCards.map(function (card) {
      return ;
    });
  }
  return cardsOnScreen;

with this:

    return allCards.map((card) => (
      
    ));

The problem in your code are:

You are looping twice, you don't need to.
You are resetting cardOnScreen in the inner loop
You are not setting key when looping

user_12061663 · Answer

Try this:

export default function SensorCards() {
  let allCards = [
    {name: 'Sensor 1', type: 'Airsensor'},
    {name: 'Sensor 2', type: 'Watersensor'},
  ];
  return (
     <>
       { allCards.map((card) => (
      
       ))}
     
  )
}

Returning iterations with React-Native

2 Answers