Skip to content

Instantly share code, notes, and snippets.

@RickArora
Created June 15, 2019 16:20
Show Gist options
  • Save RickArora/27fac8d57a9893d3fb095efefea0c8ac to your computer and use it in GitHub Desktop.
Save RickArora/27fac8d57a9893d3fb095efefea0c8ac to your computer and use it in GitHub Desktop.
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