Errata

Learning React

Errata for Learning React, Second Edition

Submit your own errata for this product.

The errata list is a list of errors and their corrections that were found after the product was released. If the error was corrected in a later version or reprint the date of the correction will be displayed in the column titled "Date Corrected".

The following errata were submitted by our customers and approved as valid errors by the author or editor.

Color key: Serious technical mistake Minor technical mistake Language or formatting error Typo Question Note Update

Version Location Description Submitted By Date submitted Date corrected
Page Chapter 2 > Object and Arrays > Destructuring Objects
In the code sample

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.

Note from the Author or Editor:
const sandwich = {
bread: "dutch crunch",
meat: "tuna",
cheese: "swiss",
toppings: ["lettuce", "tomato", "mustard"]
};

let { bread, meat } = sandwich;

console.log(bread, meat); // dutch crunch tuna

Jait Jacob  Dec 28, 2023 
Page Chapter 2, Section: Async/Await
First Code Example

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.

Note from the Author or Editor:
const getFakePerson = async () => {
let res = await fetch(someUrl);
let { results } = await res.json();
console.log(results);
};

Jonathan Claypool  Oct 08, 2023 
Page Chapter 2
Section: Object Literal Enhancement

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


Note from the Author or Editor:
This is Errata. I changed the code in this section to fix the issue:

// Old
var name = "John";
var sound = "woo woo!"

var skier = {
name: name,
sound: sound,
powderYell: function() {
var yell = this.sound.toUpperCase();
console.log(`${yell} ${yell} ${yell}!!!`);
}
};

// New
let name = "John";
let sound = "woo woo!";

const skier = {
name,
sound,
powderYell() {
let yell = this.sound.toUpperCase();
console.log(`${yell} ${yell} ${yell}!!!`);
}
};

skier.powderYell();
skier.powderYell();

Anonymous  Sep 04, 2020 
Other Digital Version
Chapter 6
Stateful context providers

"There are only three options when it comes to chancing the value of the colors array.." should be "There are only three options when it comes to changing the value of the colors array.."

Leigh Mathieson  Nov 03, 2019  Jun 12, 2020
Other Digital Version
Chapter 6
Placing colors in context. (below the 2x Notes)

"the App component itself has noting to do with colors.." should be "the App component itself has nothing to do with colors.."

Leigh Mathieson  Nov 03, 2019  Jun 12, 2020
Other Digital Version
Chapter 6
React Context

A little pedantic! But..: "The root of the tree is often very far from the leafs." Plural of leaf is "leaves"

Leigh Mathieson  Nov 03, 2019  Jun 12, 2020
Other Digital Version
Chapter6
Creating Custom Hooks

"Whey you have a large form.." should be "When you have a large form.."

Leigh Mathieson  Nov 03, 2019  Jun 12, 2020