javascript - Why is my map() with spread syntax not working?

I'm not sure where this is going wrong. I've seen several posts about this specific example from O'Reilly's Learning React, by Banks and Porcello. However, the posts appear to function properly, but my example does not. I don't notice typos. What is the source of my flaw? I'm not sure why I get "HB Woodlawn" instead of a null string value.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
  <script src="/[email protected]/babel.min.js"></script>
</head>
<body>
  
  <script type="text/babel">

    // Editing one object in an array of objects

    let schools = [
      {name: 'Yorktown'},
      {name: 'Stratford'},
      {name: 'Washington & Lee'},
      {name: 'Wakefield'}
    ];

    const editName = (oldName, newName, arr) =>
      arr.map(item => {
        if (item.name === oldName) {
          return {
            ...item,
            name
          }
        }
        else {
          return item
        }
      });

    let updatedSchools = editName('Stratford', 'HB Woodlawn', schools);

    console.log(updatedSchools[1]);  // name: ""
    console.log(schools[1]);  // name: "Stratford"

  </script>
  
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
  <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
  
  <script type="text/babel">

    // Editing one object in an array of objects

    let schools = [
      {name: 'Yorktown'},
      {name: 'Stratford'},
      {name: 'Washington & Lee'},
      {name: 'Wakefield'}
    ];

    const editName = (oldName, newName, arr) =>
      arr.map(item => {
        if (item.name === oldName) {
          return {
            ...item,
            name
          }
        }
        else {
          return item
        }
      });

    let updatedSchools = editName('Stratford', 'HB Woodlawn', schools);

    console.log(updatedSchools[1]);  // name: ""
    console.log(schools[1]);  // name: "Stratford"

  </script>
  
</body>
</html>

Share Improve this question edited Apr 20, 2023 at 13:51 Ashish Kumar Saxena 4,7108 gold badges30 silver badges48 bronze badges asked Dec 18, 2017 at 9:45 Ron Allen Smith 6032 gold badges7 silver badges19 bronze badges

2 Note: ... is not an operator. (And before anyone says it: Ignore the URL on the MDN page, it was an error by the person who created the page.) – T.J. Crowder Commented Dec 18, 2017 at 9:52
1 ummm, ... is spread operator right? – illiteratewriter Commented Dec 18, 2017 at 9:57
syntax or operator ? developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… – Ricky-U Commented Jul 22, 2021 at 3:09

Add a comment |

1 Answer 1

Sorted by: Reset to default 15

let schools = [
  {name: 'Yorktown'},
  {name: 'Stratford'},
  {name: 'Washington & Lee'},
  {name: 'Wakefield'}
];

const editName = (oldName, newName, arr) =>
  arr.map(item => {
    if (item.name === oldName) {
      return {
        ...item,
        name: newName
      }
    }
    else {
      return item
    }
  });

let updatedSchools = editName('Stratford', 'HB Woodlawn', schools);

console.log(updatedSchools[1]);  // name: ""
console.log(schools[1]);  // name: "Stratford"

You hadn't added the new value for the name, instead had left it empty. Added name:newName

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Why is my map() with spread syntax not working? - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)