This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2020-03-03
Channels
- # aleph (1)
- # announcements (9)
- # babashka (3)
- # beginners (200)
- # calva (22)
- # cider (74)
- # clojure (97)
- # clojure-dev (43)
- # clojure-europe (15)
- # clojure-italy (4)
- # clojure-nl (4)
- # clojure-sanfrancisco (2)
- # clojure-uk (103)
- # clojuredesign-podcast (2)
- # clojurescript (45)
- # core-async (5)
- # cursive (13)
- # datomic (42)
- # emacs (20)
- # fulcro (6)
- # graalvm (37)
- # jackdaw (10)
- # leiningen (7)
- # mid-cities-meetup (3)
- # off-topic (2)
- # pathom (1)
- # pedestal (3)
- # re-frame (6)
- # reagent (38)
- # reitit (5)
- # shadow-cljs (117)
- # spacemacs (1)
- # sql (1)
- # tools-deps (17)
- # vim (14)
- # xtdb (18)
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 ???}])
I cannot for the life of me figure out what I need to pass in for :extra
(to get the progress in there)
I've tried [:> [progress ...]]
, (reagent/reactify-component progress #js {props ...})
, and a flurry of other permutations but at this point I'm flailing
I checked here: https://github.com/reagent-project/reagent/blob/master/doc/InteropWithReact.md but I don't see a similar example
ah, it IS in the examples!
(defn result-dash []
[result
{:status "success"
:title "a titlee"
:extra (reagent/as-element
[progress
{: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?I think you need to tag the element directly but I also remember this being a known issue to some extent
try
^{: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.
(meta (let [] ^{:key 5} [:div :hey])) ;;=> {:key 5}
(meta ^{:key 5} (let [] [:div :hey])) ;;=> nil
(for [x (range 5)] (meta ^{:key x} [:div :hey]))
;=> '({:key 0} {:key 1} {:key 2} {:key 3} {:key 4})
so that should work
@U3BALC2HH Yea, that works, thank you 🙂
:thumbsup:
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.@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.
while we're on the topic of the ^{:key ...}
... does anyone have a preferred strategy for this?
hashing attributes, a whole attribute map, etc?
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. https://reactjs.org/docs/lists-and-keys.html#keys
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])
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?
Does anyone have any resources on that?
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
Based on that, it looks safe to assume that you won't have to change how you are doing reagent unless you want to.
gotcha, thank you 🙂