Menu
I'm really not seeing where this is going wrong. I've seen posts of this particular example from O'Reilly's Learning React, by Banks & Porcello. However, the posts seem to work fine, but my example does not. If I have a typo, I don't see it. Where's my flaw? I don't know why I get a null string value instead of "HB Woodlawn"
<!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>
391
Using the spread operator on mapThe spread operator works on a map the same way it does on an array. The main difference is that it returns a list of pairs instead of single values.
Syntax of Spread operator is same as Rest parameter but it works completely opposite of it. Syntax: var variablename1 = [... value];
map() creates a new array from calling a function for every array element. map() calls a function once for each element in an array. map() does not execute the function for empty elements. map() does not change the original array.
The JavaScript spread operator ( ... ) allows us to quickly copy all or part of an existing array or object into another array or object.
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
190
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
