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

<script> 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" }, items.map((ingredient, i) => React.createElement("li", { key: i }, ingredient) ) ); } ReactDOM.render( React.createElement(IngredientsList, { items: secretIngredients }, null), document.getElementById("root") ); </script>

[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"));