jaredly / jaredly/jaredly.github.io

first list example breaks without a `key` prop

Open
#15 1 comment 4 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
9
Forks
12
PR merge metrics
No merged PRs in 30d

Description

the first example for rendering a list has this code

**TodoApp_2_1.re**
```ocaml
ReasonReact.arrayToElement(Array.of_list(
List.map((item) => , items)
))
```

but although this code will compile correctly, when viewing it in a browser, you'll get the following traceback which hides the fact that the runtime error is to do with `validateExplicitKey`

**`Uncaught TypeError: element._owner.getName is not a function`**

 at validateExplicitKey (file:///Users/marcos/projects/a-reason-react-tutorial/public/bundle.js:5636:66)

at validateChildKeys (file:///Users/marcos/projects/a-reason-react-tutorial/public/bundle.js:5659:9)
at Object.createElement (file:///Users/marcos/projects/a-reason-react-tutorial/public/bundle.js:5747:9)
at newrecord.(anonymous function) (file:///Users/marcos/projects/a-reason-react-tutorial/public/bundle.js:6730:39)
at Object._1 (file:///Users/marcos/projects/a-reason-react-tutorial/public/bundle.js:1052:12)
at Object.render (file:///Users/marcos/projects/a-reason-react-tutorial/public/bundle.js:6250:32)
at finishClassComponent (file:///Users/marcos/projects/a-reason-react-tutorial/public/bundle.js:22098:31)
at updateClassComponent (file:///Users/marcos/projects/a-reason-react-tutorial/public/bundle.js:22075:12)
at beginWork (file:///Users/marcos/projects/a-reason-react-tutorial/public/bundle.js:22449:16)
at performUnitOfWork (file:///Users/marcos/projects/a-reason-react-tutorial/public/bundle.js:24440:16)
validateExplicitKey @ bundle.js:5636
validateChildKeys @ bundle.js:5659
createElement @ bundle.js:5747
newrecord.(anonymous function) @ bundle.js:6730
_1 @ bundle.js:1052
render @ bundle.js:6250
finishClassComponent @ bundle.js:22098
updateClassComponent @ bundle.js:22075
beginWork @ bundle.js:22449
performUnitOfWork @ bundle.js:24440
workLoop @ bundle.js:24504
callCallback @ bundle.js:14736
invokeGuardedCallbackDev @ bundle.js:14775
invokeGuardedCallback @ bundle.js:14632
renderRoot @ bundle.js:24582
performWorkOnRoot @ bundle.js:25196
performWork @ bundle.js:25148
requestWork @ bundle.js:25057
scheduleWorkImpl @ bundle.js:24940
scheduleWork @ bundle.js:24902
scheduleTopLevelUpdate @ bundle.js:25373
updateContainer @ bundle.js:25411
(anonymous) @ bundle.js:29428
unbatchedUpdates @ bundle.js:25282
renderSubtreeIntoContainer @ bundle.js:29427
render @ bundle.js:29492
renderToElementWithId @ bundle.js:13825
(anonymous) @ bundle.js:6664
__webpack_require__ @ bundle.js:20
module.exports @ bundle.js:63
(anonymous) @ bundle.js:66
bundle.js:23965 The above error occurred in the component:
in TodoApp

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 @ bundle.js:23965
captureError @ bundle.js:24756
renderRoot @ bundle.js:24607
performWorkOnRoot @ bundle.js:25196
performWork @ bundle.js:25148
requestWork @ bundle.js:25057
scheduleWorkImpl @ bundle.js:24940
scheduleWork @ bundle.js:24902
scheduleTopLevelUpdate @ bundle.js:25373
updateContainer @ bundle.js:25411
(anonymous) @ bundle.js:29428
unbatchedUpdates @ bundle.js:25282
renderSubtreeIntoContainer @ bundle.js:29427
render @ bundle.js:29492
renderToElementWithId @ bundle.js:13825
(anonymous) @ bundle.js:6664
__webpack_require__ @ bundle.js:20
module.exports @ bundle.js:63
(anonymous) @ bundle.js:66
bundle.js:14782 Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://fb.me/react-crossorigin-error for more information.
at Object.invokeGuardedCallbackDev (bundle.js:14782)
at invokeGuardedCallback (bundle.js:14632)
at renderRoot (bundle.js:24582)
at performWorkOnRoot (bundle.js:25196)
at performWork (bundle.js:25148)
at requestWork (bundle.js:25057)
at scheduleWorkImpl (bundle.js:24940)
at scheduleWork (bundle.js:24902)
at scheduleTopLevelUpdate (bundle.js:25373)
at Object.updateContainer (bundle.js:25411)
invokeGuardedCallbackDev @ bundle.js:14782
invokeGuardedCallback @ bundle.js:14632
renderRoot @ bundle.js:24582
performWorkOnRoot @ bundle.js:25196
performWork @ bundle.js:25148
requestWork @ bundle.js:25057
scheduleWorkImpl @ bundle.js:24940
scheduleWork @ bundle.js:24902
scheduleTopLevelUpdate @ bundle.js:25373
updateContainer @ bundle.js:25411
(anonymous) @ bundle.js:29428
unbatchedUpdates @ bundle.js:25282
renderSubtreeIntoContainer @ bundle.js:29427
render @ bundle.js:29492
renderToElementWithId @ bundle.js:13825
(anonymous) @ bundle.js:6664
__webpack_require__ @ bundle.js:20
module.exports @ bundle.js:63
(anonymous) @ bundle.js:66

this is easy enough to fix if you use the title as a key (for now at least, or you could horrifically suggest using `List.mapi` and passing...). in any case, the code should probably change to

```diff
ReasonReact.arrayToElement(Array.of_list(
- List.map((item) => , items)
+ List.map((item) => , items)
))
```

at least until the subsequent portion where the items actually do have their own ids.

i tried doing this in a pr, but i'm pretty sure this repo doesn't actually include the original source files and just put stuff here (why not, though, jared??)

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the TodoApp_2_1.re example and confirm whether its original source is available, since the issue says this repository may contain only generated material. Update the list-rendering example so each TodoItem has the described key, then verify that the browser no longer reports the key-related error shown in bundle.js.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, ocaml, react
Domain
documentation, frontend
Issue type
Documentation
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.