-
-
Save RickArora/27fac8d57a9893d3fb095efefea0c8ac to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
App.js | |
const Pet = ([name, animal, breed]) => { | |
return React.createElement('div', {}, [ | |
React.createElement('h1', {}, name), | |
React.createElement('h2', {}, animal), | |
React.createElement('h2', {}, breed) | |
]); | |
}; | |
const App = () => { | |
return React.createElement('div', { id: 'something-important' }, [ | |
React.createElement('h1', {}, 'Adopt Me!'), | |
React.createElement(Pet, { | |
name: 'Luna', | |
animal: 'Dog', | |
breed: 'Donkey' | |
}), | |
React.createElement(Pet, { | |
name: 'Pipper', | |
animal: 'Bird', | |
breed: 'Cockatiel' | |
}), | |
React.createElement(Pet, { | |
name: 'Jimmy', | |
animal: 'Cat', | |
breed: 'Rottweiler' | |
}) | |
]); | |
}; | |
ReactDOM.render(React.createElement(App), document.getElementById('root')); | |
Index.html is: | |
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> | |
<title>Document</title> | |
<link rel="stylesheet" href="./style.css" /> | |
</head> | |
<body> | |
<div id="root">not rendered</div> | |
<script src="https://unpkg.com/react@16.8.4/umd/react.development.js"></script> | |
<script src="https://unpkg.com/react-dom@16.8.4/umd/react-dom.development.js"></script> | |
<script src="App.js"></script> | |
</body> | |
</html> | |
Error is: Download the React DevTools for a better development experience: https://fb.me/react-devtoolsYou might need to use a local HTTP server (instead of file://): https://fb.me/react-devtools-faq | |
react.development.js:276 Warning: Each child in a list should have a unique "key" prop. | |
Check the render method of `App`. See https://fb.me/react-warning-keys for more information. | |
in h1 (created by App) | |
in App | |
warningWithoutStack @ react.development.js:276 | |
warning @ react.development.js:1791 | |
validateExplicitKey @ react.development.js:2886 | |
validateChildKeys @ react.development.js:2908 | |
createElementWithValidation @ react.development.js:3041 | |
App @ App.js:10 | |
renderWithHooks @ react-dom.development.js:13027 | |
mountIndeterminateComponent @ react-dom.development.js:15109 | |
beginWork @ react-dom.development.js:15714 | |
performUnitOfWork @ react-dom.development.js:19401 | |
workLoop @ react-dom.development.js:19441 | |
renderRoot @ react-dom.development.js:19524 | |
performWorkOnRoot @ react-dom.development.js:20431 | |
performWork @ react-dom.development.js:20343 | |
performSyncWork @ react-dom.development.js:20317 | |
requestWork @ react-dom.development.js:20186 | |
scheduleWork @ react-dom.development.js:20000 | |
scheduleRootUpdate @ react-dom.development.js:20661 | |
updateContainerAtExpirationTime @ react-dom.development.js:20689 | |
updateContainer @ react-dom.development.js:20746 | |
ReactRoot.render @ react-dom.development.js:21042 | |
(anonymous) @ react-dom.development.js:21179 | |
unbatchedUpdates @ react-dom.development.js:20548 | |
legacyRenderSubtreeIntoContainer @ react-dom.development.js:21175 | |
render @ react-dom.development.js:21244 | |
(anonymous) @ App.js:30 | |
3App.js:1 Uncaught TypeError: undefined is not a function | |
at Pet (App.js:1) | |
at renderWithHooks (react-dom.development.js:13027) | |
at mountIndeterminateComponent (react-dom.development.js:15109) | |
at beginWork (react-dom.development.js:15714) | |
at performUnitOfWork (react-dom.development.js:19401) | |
at workLoop (react-dom.development.js:19441) | |
at HTMLUnknownElement.callCallback (react-dom.development.js:143) | |
at Object.invokeGuardedCallbackDev (react-dom.development.js:193) | |
at invokeGuardedCallback (react-dom.development.js:250) | |
at replayUnitOfWork (react-dom.development.js:18667) | |
Pet @ App.js:1 | |
renderWithHooks @ react-dom.development.js:13027 | |
mountIndeterminateComponent @ react-dom.development.js:15109 | |
beginWork @ react-dom.development.js:15714 | |
performUnitOfWork @ react-dom.development.js:19401 | |
workLoop @ react-dom.development.js:19441 | |
callCallback @ react-dom.development.js:143 | |
invokeGuardedCallbackDev @ react-dom.development.js:193 | |
invokeGuardedCallback @ react-dom.development.js:250 | |
replayUnitOfWork @ react-dom.development.js:18667 | |
renderRoot @ react-dom.development.js:19557 | |
performWorkOnRoot @ react-dom.development.js:20431 | |
performWork @ react-dom.development.js:20343 | |
performSyncWork @ react-dom.development.js:20317 | |
requestWork @ react-dom.development.js:20186 | |
scheduleWork @ react-dom.development.js:20000 | |
scheduleRootUpdate @ react-dom.development.js:20661 | |
updateContainerAtExpirationTime @ react-dom.development.js:20689 | |
updateContainer @ react-dom.development.js:20746 | |
ReactRoot.render @ react-dom.development.js:21042 | |
(anonymous) @ react-dom.development.js:21179 | |
unbatchedUpdates @ react-dom.development.js:20548 | |
legacyRenderSubtreeIntoContainer @ react-dom.development.js:21175 | |
render @ react-dom.development.js:21244 | |
(anonymous) @ App.js:30 | |
3react-dom.development.js:17206 The above error occurred in the <Pet> component: | |
in Pet (created by App) | |
in div (created by App) | |
in App | |
Consider adding an error boundary to your tree to customize error handling behavior. | |
Visit https://fb.me/react-error-boundaries to learn more about error boundaries. | |
logCapturedError @ react-dom.development.js:17206 | |
logError @ react-dom.development.js:17242 | |
update.callback @ react-dom.development.js:18154 | |
callCallback @ react-dom.development.js:16522 | |
commitUpdateEffects @ react-dom.development.js:16561 | |
commitUpdateQueue @ react-dom.development.js:16552 | |
commitLifeCycles @ react-dom.development.js:17472 | |
commitAllLifeCycles @ react-dom.development.js:18825 | |
callCallback @ react-dom.development.js:143 | |
invokeGuardedCallbackDev @ react-dom.development.js:193 | |
invokeGuardedCallback @ react-dom.development.js:250 | |
commitRoot @ react-dom.development.js:19037 | |
(anonymous) @ react-dom.development.js:20507 | |
unstable_runWithPriority @ react.development.js:735 | |
completeRoot @ react-dom.development.js:20506 | |
performWorkOnRoot @ react-dom.development.js:20435 | |
performWork @ react-dom.development.js:20343 | |
performSyncWork @ react-dom.development.js:20317 | |
requestWork @ react-dom.development.js:20186 | |
scheduleWork @ react-dom.development.js:20000 | |
scheduleRootUpdate @ react-dom.development.js:20661 | |
updateContainerAtExpirationTime @ react-dom.development.js:20689 | |
updateContainer @ react-dom.development.js:20746 | |
ReactRoot.render @ react-dom.development.js:21042 | |
(anonymous) @ react-dom.development.js:21179 | |
unbatchedUpdates @ react-dom.development.js:20548 | |
legacyRenderSubtreeIntoContainer @ react-dom.development.js:21175 | |
render @ react-dom.development.js:21244 | |
(anonymous) @ App.js:30 | |
react-dom.development.js:20401 Uncaught TypeError: undefined is not a function | |
at Pet (App.js:1) | |
at renderWithHooks (react-dom.development.js:13027) | |
at mountIndeterminateComponent (react-dom.development.js:15109) | |
at beginWork (react-dom.development.js:15714) | |
at performUnitOfWork (react-dom.development.js:19401) | |
at workLoop (react-dom.development.js:19441) | |
at renderRoot (react-dom.development.js:19524) | |
at performWorkOnRoot (react-dom.development.js:20431) | |
at performWork (react-dom.development.js:20343) | |
at performSyncWork (react-dom.development.js:20317) | |
Pet @ App.js:1 | |
renderWithHooks @ react-dom.development.js:13027 | |
mountIndeterminateComponent @ react-dom.development.js:15109 | |
beginWork @ react-dom.development.js:15714 | |
performUnitOfWork @ react-dom.development.js:19401 | |
workLoop @ react-dom.development.js:19441 | |
renderRoot @ react-dom.development.js:19524 | |
performWorkOnRoot @ react-dom.development.js:20431 | |
performWork @ react-dom.development.js:20343 | |
performSyncWork @ react-dom.development.js:20317 | |
requestWork @ react-dom.development.js:20186 | |
scheduleWork @ react-dom.development.js:20000 | |
scheduleRootUpdate @ react-dom.development.js:20661 | |
updateContainerAtExpirationTime @ react-dom.development.js:20689 | |
updateContainer @ react-dom.development.js:20746 | |
ReactRoot.render @ react-dom.development.js:21042 | |
(anonymous) @ react-dom.development.js:21179 | |
unbatchedUpdates @ react-dom.development.js:20548 | |
legacyRenderSubtreeIntoContainer @ react-dom.development.js:21175 | |
render @ react-dom.development.js:21244 | |
(anonymous) @ App.js:30 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment