В Code.js не работает следующий код

Question

    const robots = [
  {
    id: 1,
      name: 'Leanne Graham',
      username: 'Bret',

  },
  {
    id: 2,
    name: 'Ervin Howell',
    username: 'Antonette',

  },
  {
    id: 3,
    name: 'Clementine Bauch',
    username: 'Samantha',

  },
  {
    id: 4,
    name: 'Patricia Lebsack',
    username: 'Karianne',

  },
  {
    id: 5,
    name: 'Chelsey Dietrich',
    username: 'Kamren',

   },
   {
    id: 6,
    name: 'Mrs. Dennis Schulist',
    username: 'Leopoldo_Corkery',

  },
  {
    id: 7,
    name: 'Kurtis Weissnat',
    username: 'Elwyn.Skiles',

  },
  {
    id: 8,
     name: 'Nicholas Runolfsdottir V',
    username: 'Maxime_Nienow',

  },
  {
    id: 9,
    name: 'Glenna Reichert',
    username: 'Delphine',

  },
  {
    id: 10,
    name: 'Clementina DuBuque',
    username: 'Moriah.Stanton',

  }
];



let cardComp = robots.forEach((element,index)=> {
        return (<Card  id = {robots[index].id} Name = {robots[index].name}
        user ={robots[index].username} mail = {robots[index].email}/>)
      });

Следующий код не работает в response.js Но тот же код, когда я заменяю цикл forEach на карты, работает нормально. Почему это не работает с циклом forEach? Когда я пытаюсь получить значение из массива объектов, используя обычный javascript, он работает просто отлично, и я могу получить все значения в массиве. Но он не работает вact.js с циклом forEach.

Answer 1

let cardComp = robots.forEach((element,index)=> {
        return (<Card  id = {robots[index].id} Name = {robots[index].name}
        user ={robots[index].username} mail = {robots[index].email}/>)
      });

forEach в javascript ничего не возвращает

вместо этого используйте карту, которая возвращает новый массив

let cardComp = robots.map((element) => {
      return (<Card id={element.id} Name={element.name} user={element.username} mail={element.email}/>)
    });

См. MDN прототип информации о forEach

и map

var new_array = arr.map(function callback(currentValue[, index[, array]]) {
    // Return element for new_array
}[, thisArg])