Fork me on GitHub
Lone Ranger14:03:56

ok this is killing me. Trying to mimic this:

import { Result, Button } from 'antd';

    title="There are some problems with your operation."
      <Button type="primary" key="console">
        Go Console
Here's what I have:
(def progress (reagent/adapt-react-class js/antd.Progress))
(def result (reagent/adapt-react-class js/antd.Result))

(def result-dash []
  [result {:title "a title" :extra ???}])

Lone Ranger14:03:25

I cannot for the life of me figure out what I need to pass in for :extra

Lone Ranger14:03:31

(to get the progress in there)

Lone Ranger14:03:28

I've tried [:> [progress ...]], (reagent/reactify-component progress #js {props ...}), and a flurry of other permutations but at this point I'm flailing

Lone Ranger14:03:29

ah, it IS in the examples!

Lone Ranger14:03:03

(defn result-dash []
   {:status "success"
    :title  "a titlee"
    :extra  (reagent/as-element
              {:strokeColor {"0%"  "#0000ff"
                             "99%" "#ff0000"}
               :percent     76}]


Hi, I just figured out that having a let block in a for will lead to an error. For example this code:

(for [[path operations] paths]
       ^{:key (str path)}
       (let [foo (clean-path path)]
         [:div foo]))]))
Will lead to this error:
Warning: Each child in a list should have a unique "key" prop.

Check the render method of `de.sveri.apigen.generated.component.paths_panel`. See  for more information.
    in div (created by de.sveri.apigen.generated.component.paths_panel)
Removing the let, everything works as expected. Is there another way to have a let inside the for?


Replace (let [...]) with :let [...], without ().

Lone Ranger15:03:51

I think you need to tag the element directly but I also remember this being a known issue to some extent

Lone Ranger15:03:07


^{:key (str path)}
[:div foo]


Ah, I see what sveri meant - the formatting took me astray. Yes, the metadata set with a reader macro can only be set directly on the form to which is should apply.

Lone Ranger15:03:21

(meta (let [] ^{:key 5} [:div :hey])) ;;=> {:key 5}
  (meta ^{:key 5} (let [] [:div :hey])) ;;=> nil

Lone Ranger15:03:20

(for [x (range 5)] (meta ^{:key x} [:div :hey]))
;=> '({:key 0} {:key 1} {:key 2} {:key 3} {:key 4})

Lone Ranger15:03:27

so that should work


@U3BALC2HH Yea, that works, thank you 🙂


Although, no, I was to early. It transpiles, but the code inside is not called:

(for [[path operations] paths]
       (meta ^{:key (str path)}
         (let [cleaned-path (remove-colon path)]
           [:b cleaned-path]
           [operation-panel cleaned-path operations])))
I neither see the b tag nor the operation-panel component.


Remove the meta call. It was used just to demonstrate that the meatadata is applied.


@U2FRKM4TW but then it's the same as my code that doesnt work?


It's not the same. You write ^{:key ...} (let [...] [:div ...]). But it should be (let [...] ^{:key ...} [:div ...]). Completely different things.


Ah, sorry, I missed this. You are right.


I catched the cold and it seems like my concentration is not as good as it should be.


Get better soon. :)


Ok, tried it, works 🙂

Lone Ranger15:03:06

while we're on the topic of the ^{:key ...} ... does anyone have a preferred strategy for this?

Lone Ranger15:03:59

hashing attributes, a whole attribute map, etc?


The same as in regular React apps. I.e. it depends.

Lone Ranger15:03:33

I'm asking because I actually don't know much about regular react apps 😅


Then you just have to read React's documentation, I'm afraid. But it's well written.

Lone Ranger15:03:36

sounds good to me! thanks for the resource 🙂


@sveri The for supports a :let key within the binding block itself

(for [x (range 10) :let [y (inc x)]] [x y])
=> ([0 1] [1 2] [2 3] [3 4] [4 5] [5 6] [6 7] [7 8] [8 9] [9 10])


The formatting it bad - the let has nothing to do with it. :)

Lone Ranger15:03:00

So I'm a bit out of date on my react stuff -- I understand that react-hooks may be changing the way we do reagent a bit?

Lone Ranger15:03:07

Does anyone have any resources on that?


Take a look at the Reagent section of - it's the most recent I've seen on it, though there may be some news I've missed


Based on that, it looks safe to assume that you won't have to change how you are doing reagent unless you want to.

Lone Ranger16:03:06

gotcha, thank you 🙂