Errata

I couldn't submit this report without entering page and paragraph numbers, but I saw the error in a web page.

I was trying to use the code snippets from the taster chapter of this oreilly book:

https://www.oreilly.com/library/view/what-react-is/9781491996744/ch01.html

1. What Is React? - What React Is and Why It Matters [Book]
Chapter 1. What Is React? React is a library for helping developers build user interfaces (UIs) as a tree of small pieces called components. A component is a mixture of … - Selection from What React Is and Why It Matters [Book]
www.oreilly.com


But there's a typo in the code snippet that stops it from working.

The supplied code looks like this (I just copied and pasted individual snippets from the web page to a single js file):

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

/**
* An individual ToDo item
* @param {Object} props
* @param {String} props.todoItem A ToDo
*/
const Todo = ({ todoItem }) => (
<li>{ todoItem.text }</li>
);

/**
* A todoList with a Todo for each item in todoListData
* @param {Object} props
* @param {Array.<String>} props.todoListData A List of ToDos
*/
const TodoList = ({ todoListData }) => {
const todoListItems = todoListData
.map(todo => <Todo todo={todo} />);

return <ul>{todoListItems}</ul>;
};

const todos = [
{ text: "Go for a run" },
{ text: "Cook dinner at home" },
{ text: "Call Dentist" }
];

const app = <TodoList todoListData={todos} />;
const targetDOMElement = document.getElementById("root");

ReactDOM.render(app, targetDOMElement);


But that code produces an error:


TypeError: Cannot read properties of undefined (reading 'text')

Todo
T:/Development/Sandbox/React/ReactASPCrud/ReactASPCrud/react-ui-crud/src/index.js:11
8 | * @param {String} props.todoItem A ToDo
9 | */
10 | const Todo = ({ todoItem }) => (
> 11 | <li>{ todoItem.text }</li>
| ^ 12 | );




In order to get rid of the error you have to change one line to this, so todo= becomes todoItem=

.map(todo => <Todo todoItem={todo} />);

And then the sample works correctly:

Go for a run
Cook dinner at home
Call Dentist

I'd like to use this OReilly book, but I'm put off by having non-working sample code in the very first chapter. Would you fix this typo?