jaredly / jaredly/jaredly.github.io
first list example breaks without a `key` prop
- 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 TodoAppConsider 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