Fork me on GitHub
#reagent
<
2020-03-03
>
Lone Ranger14:03:56

ok this is killing me. Trying to mimic this:

import { Result, Button } from 'antd';

ReactDOM.render(
  <Result
    status="warning"
    title="There are some problems with your operation."
    extra={
      <Button type="primary" key="console">
        Go Console
      </Button>
    }
  />,
  mountNode,
);
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 []
  [result
   {:status "success"
    :title  "a titlee"
    :extra  (reagent/as-element
             [progress
              {:strokeColor {"0%"  "#0000ff"
                             "99%" "#ff0000"}
               :percent     76}]
             )}])

sveri15:03:08

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?

p-himik15:03:00

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

try

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

p-himik15:03:55

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

sveri15:03:18

@U3BALC2HH Yea, that works, thank you 🙂

sveri15:03:20

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.

p-himik15:03:55

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

sveri15:03:05

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

p-himik15:03:01

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

sveri15:03:41

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

sveri15:03:00

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

p-himik15:03:41

Get better soon. :)

sveri15:03:03

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?

p-himik15:03:54

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 😅

p-himik15:03:00

Then you just have to read React's documentation, I'm afraid. But it's well written. https://reactjs.org/docs/lists-and-keys.html#keys

Lone Ranger15:03:36

sounds good to me! thanks for the resource 🙂

manutter5115:03:29

@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])

p-himik15:03:34

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?

shaun-mahood16:03:51

Take a look at the Reagent section of https://www.clojuriststogether.org/news/q1-2020-funding-announcement/ - it's the most recent I've seen on it, though there may be some news I've missed

shaun-mahood16:03:42

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 🙂