Errata

At the end of the recursion section, there is a demonstration of each step of the deepPick function. The comment next to the function call (at the top of the code block) and the comment showing the result (at the bottom of the block) both say the result is "Deacon". But the function is fetching the "first" parameter of the name object, which is "Dan".

The code block defining the StarRating function uses a function called onRate. onRate is not defined and added to the rest of the code until the next section.

export default function ColorList({ colors = [], onRemoveColor = f => f }) {
if (!colors.length) return <div>No Colors Listed. (Add a Color)</div>;

return (
colors.map(color => (
<Color key={color.id} {...color} onRemove={onRemoveColor} />
)
}
</div>
);
}

This code is missing a <div> after the return statement which is included in the source code here:

https://codesandbox.io/s/learning-react-color-organizer-2-iytxb?file=/src/ColorList.js

return (
<div>
{colors.map(color => (
<Color
key={color.id}
{...color}
onRemove={onRemoveColor}
onRate={onRateColor}
/>
))}
</div>
);

The first code example assigns the destructured variables with `const { bread, meat } = ...

The subsequent text notes that the variables were declared with `let`, which they are in the following code sample.

> The configuration file should be saved to the root folder of the project, right next to the index.js file

The reference to index.js should be index.html, given the directory structure laid out in Section 1 and the relative reference to "./src/index.js" in the code listing.

This section appears to contain some path inconsistencies:

1. "We exported the bundle to the dist folder." and the relative reference in the index.html code listing suggest that bundle.js should have been exported to ./dist, but the webpack.config.js code listing puts the bundle in ./dist/assets.

2. "The dist folder is where the index.html file should be placed.", but the directory structure given in 1. CREATE THE PROJECT shows index.html in the project root.

The example overrides the function of the object itself when called mulitple times:
From:
// New
const skier = {
name,
sound,
powderYell() {
let yell = this.sound.toUpperCase();
console.log(`${yell} ${yell} ${yell}!!!`);
},
speed(mph) {
// !Next line overrides object function
this.speed = mph;
console.log("speed:", mph);
}
};
>> skiers.speed(12)
<< speed: 12
And then calling it again:
>> skiers.speed(12)
<< Uncaught TypeError: skiers.speed is not a function

The socket.io code sample listens for a 'disconnecting' event - should be 'disconnect'.

The code sample that is prefaced with "For example, if we used a boolean:" uses a string, but reports the error that would appear if the code had used a boolean as described.

Error: getFakePerson() returns "undefined" in the console.

const getFakePerson = async () => {
let res = await fetch(someUrl);
let { results } = res.json();
console.log(results);
};

Using 'await' makes the variable 'res' a Response object.
However, when calling res.json(), the result is another Promise object.
I was unable to properly destructure the object because it was a Promise object.
Thus only "undefined" is logged in the console.
To fix this I had to add a second "await".

const getFakePerson = async () => {
let res = await fetch(someUrl);
let { results } = await res.json();
console.log(results);
};

This works because, fetch creates a Promise which is resolved, once the API returns data, into a Response.
Then res.json() creates a Promise which is *immediately* resolved into a Response object.
This response object can be destructured and the results properly logged to the console.

Tested in Firefox console.

The code uses const instead of let for destructuring the object into variables bread and meat. Subsequent para says ‘let’ is used. That is incorrect.

Chapter 2, Page 14, Under Function returns, 2nd code example - arguments passed into function should be switched around as the function has been updated to accept firstName, then message as parameters re: `console.log(createCompliment("You're so cool", "Molly"))` should be `console.log(createCompliment("Molly", "You're so cool"))`

In the section of Async/Await, the getFakePerson function expression you write, I find that you missed a "await" before "res.json()". Otherwise the result in console of getFakePerson() is always undefined since the "res" is undefined before the await of fetch(...), so you cannot get "results" from res.json().

At "container = document.getElement...", it should be made clear that the element "container" is to be supplied in the HTML, or somewhere, otherwise it is just 'null', and appendChild() doesn't work.

Missing 'await' operator before 'res.json();'
Without it, it returns 'undefined'.

const getFakePerson = async() => {
let res = await fetch("https://api.randomuser.me/?nat=US&results=1");
let { results } = res.json();
console.log(results);
};

getFakePerson();

There is an extra closing parenthesis at the end of the getPeople(5) code block.

Current code block as printed in the book, which returns an "Unexpected token" error:

getPeople(5)
.then(members => console.log(members))
.catch(error => console.error(`getPeople failed: ${error.message}`))
);

Corrected code block:

getPeople(5)
.then(members => console.log(members))
.catch(error => console.error(`getPeople failed: ${error.message}`));

As printed in the book: "log("logging a message");" is missing the "timestamp" variable.

As printed in book, there are two missing equal signs and there is a closing curly bracket that should be a closing parenthesis:

const print(message) => log(message, new Date())

const log(message, timestamp) => console.log(`${timestamp.toString()}:
${message}`}

module.exports = {print, log}


Should be corrected as:

const print=(message) => log(message, new Date())

const log=(message, timestamp) => console.log(`${timestamp.toString()}:
${message}`)

module.exports = {print, log}

const string = "Restaurants in Hanalei";
const urlFriendly = "";
for (var i = 0; i < string.length; i++){
if (string[i] === " ") {
urlFriendly += "-";
}else{
urlFriendly += string[i];
}
}
console.log(urlFriendly);

urlFriendly is declared as const, but is assigned to in the for loop. This results in a "Uncaught TypeError: Assignment to constant variable."

The code has `let time` twice (on lines 3 & 6 on page 53), which causes "SyntaxError: Identifier 'time' has already been declared".

The first `let time = "";` (on line 3) should be removed.

in prependZero declaration, key needs to be in brackets otherwise the "key" field is set, and not the actual key field name passed in (e.g. hours).

const prependZero = key => clockTime => ({
...clockTime,
key: clockTime[key] < 10 ? "0" + clockTime[key] : clockTime[key],
});

Key should be in brackets as it is a ES6 Computed Property Name.

[key]: clockTime[key] < 10 ? "0" + clockTime[key] : clockTime[key],

3rd line of code:
const promise = new Promise...
is later referenced:
throw pending;

Should either be const pending... or throw promise