Chapter 4 / items is not defined

[Jf-js]

Hi,

Will you please help me to spot the issue with the code given below. While running it I get the below error. I understand from the code as well as from the error message that the variable items is not defined. However I am not able to understand the way it should run as it is assumed by the Author.

Uncaught ReferenceError: items is not defined at IngredientsList (trial3.html:34:7) at renderWithHooks (react-dom.development.js:14938:20) at mountIndeterminateComponent (react-dom.development.js:17617:15) at beginWork (react-dom.development.js:18731:18) at HTMLUnknownElement.callCallback (react-dom.development.js:182:16) at Object.invokeGuardedCallbackDev (react-dom.development.js:231:18) at invokeGuardedCallback (react-dom.development.js:286:33) at beginWork$1 (react-dom.development.js:23338:9) at performUnitOfWork (react-dom.development.js:22292:14) at workLoopSync (react-dom.development.js:22265:24) IngredientsList @ trial3.html:34 renderWithHooks @ react-dom.development.js:14938 mountIndeterminateComponent @ react-dom.development.js:17617 beginWork @ react-dom.development.js:18731 callCallback @ react-dom.development.js:182 invokeGuardedCallbackDev @ react-dom.development.js:231 invokeGuardedCallback @ react-dom.development.js:286 beginWork$1 @ react-dom.development.js:23338 performUnitOfWork @ react-dom.development.js:22292 workLoopSync @ react-dom.development.js:22265 performSyncWorkOnRoot @ react-dom.development.js:21891 scheduleUpdateOnFiber @ react-dom.development.js:21323 updateContainer @ react-dom.development.js:24508 (anonymous) @ react-dom.development.js:24893 unbatchedUpdates @ react-dom.development.js:22038 legacyRenderSubtreeIntoContainer @ react-dom.development.js:24892 render @ react-dom.development.js:24975 (anonymous) @ trial3.html:40

[kensan73]

Guessing it should be something like this

  const secretIngredients = ["1 cup unsalted butter", "1 cup crunchy peanut butter",
    "1 cup brown sugar", "1 cup white sugar", "2 eggs", "2.5 cups all purpose flour",
    "1 teaspoon baking powder", "0.5 teaspoon salt"];

  function IngredientsList() {
    return React.createElement("ul", {className: "ingredients"},
      secretIngredients.map((ingredient, i) =>
        React.createElement("li", {key: i}, ingredient)));
  }

  ReactDOM.render(React.createElement(IngredientsList, {
    items: secretIngredients}, null), document.getElementById("root"));

[ertug-guney]

It is running with this code:

function IngredientsList({ items }) {                //adding {items} as an parameter
  return React.createElement(
    "ul",
    { className: "ingredients" },
    items.map((ingredient, i) =>
      React.createElement("li", { key: i }, ingredient))
  );
}

ReactDOM.render(
  React.createElement(IngredientsList, { items: secretIngredients }, null),
  document.getElementById("root"));