Fork me on GitHub
#reagent
<
2021-11-09
>
Gerome08:11:35

Hello everybody! I have a list of items that have a https://cljs.github.io/api/cljs.core/random-uuid as their id. I would like to use this id as the item key for react performance improvements. However, if I use the id as metadata :tr ^{:key id} [:td $STUFF]]http://reagent-project.github.io/`[:tr {:key id} [:td $STUFF]]`http://reagent-project.github.io/, however, use metadata. What am I missing?

1
juhoteperi08:11:05

The :key attribute is supported for built-in React elements, i.e. DOM/HTML elements. Metadata is required to provide a key for components (functions).

👍 2
juhoteperi08:11:49

React devtools shows a tree of React nodes, with the keys, if you want to validate they are working: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

Gerome14:11:56

Well the problem is that I'm adding the key using metadata but I still get warnings from react saying each item needs a unique key.

Gerome14:11:28

Got the issue... I did [:tr ^{:key id} ....] but the meta data should go before the component: ^{:key id} [:tr ...].

Gerome08:11:58

Wow, slack does not like a lot of brackets and parens in it's markdown. Well, sorry for the messy links. I tried to fix it but it keeps breaking if I have several brackets in the code block. :man-shrugging:

p-himik08:11:21

> Reagent doesn't render the key attribute That's because it's not supposed to be an HTML attribute. It's stored internally, it never makes it to the DOM. You should definitely use metadata instead of an attribute. And to judge whether it works or not, do actual performance measurements before and after the change.

Gerome08:11:13

Interesting, I was suspecting something like that. However, I still get a warning by React, saying that each item should have a unique key. Should I be worried about that?

Gerome08:11:05

I mean, I am actually worried, that's the whole reason I'm writing to this channel.

p-himik08:11:06

Yes, you should. IIRC, the warning mentions the exact components that lack the keys or have duplicated keys.

Mitul Shah15:11:58

const JSXContent = () => (
  <Tippy content={<span>Tooltip</span>}>
    <button>My button</button>
  </Tippy>
);
Having trouble writing this in Reagent any tips?
[:> tippy {:content [:span "Tooltip"]}
       ...]]

Roman Liutikov16:11:28

should be (r/as-element [:span "Tooltip"]), since React component doesn’t know how to interpret Hiccup

Mitul Shah16:11:10

awesome thank u