You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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>
The text was updated successfully, but these errors were encountered:
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
<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>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
The text was updated successfully, but these errors were encountered: