This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
I have a hard time understanding how to use reagent with Clojure syntax properly… If this line
(def active? (get-in coffee-shops [:item-01 :level]))
which give me 5. However when calling it in another component, it renders nothing:
defn circle [items]
[:div.level-list
(for [item items]
[:div.circle-normal {:style {:background-color
(when (= item active?) "green")}} item])])
just Warning: Each child in a list should have a unique “key” prop.
don’t see something special
You need to wrap the for call in a doall to force it to render. And between the for and div add a unique key. something like
^{:key item)}
Like?
(doall (for [item items]
[:div.circle-normal {:style {:background-color
(when (= item active?) "green")}} item]))])
If I change the item value to a number, it works, but if I leave active? it still not working
And the REPL does prints me the correct value of “active?” :thinking_face:
The circle component is being called here
(defn fancy-level-list []
[:div.fancy-level-list
[:p "Fancy list:"]
[circle (range 1 11)]])
Perhaps need to use a different fn than range?
the above ^^
(defn circle [items active?]
[:div.level-list
[:div.new-title (map (comp :level val) coffee-shops)]
(doall (for [item items]
[:div.circle-normal {:style {:background-color
(when (= item active?) "green")}} item]))])
Ohh yeah it’s just to render it on my page to see when it renders 😆
In general, I would suggest to make the circle work for something simple first. Just to get it to render something. There are a bit too many possible issues for me to oversee it.
I would try to render a string instead of an item first, if that appears you can take it a step further
you also use when, wich means in the case the condition fails, it doesn't add a color to the item you are rendering
Got it. Appreciate it, thanks! 🙂
That’s weird. I get to extract the level number in my main component, but when I want to implement it to work with the range fn, it doesn’t seems to work..
(defn circle [items]
[:div.level-list
(doall (for [item items]
[:div.circle-normal{:style {:background-color
(map :level (vals coffee-shops) "green")}} item]))])
(defn fancy-level-list []
[:div.fancy-level-list
[:p "Fancy list:"]
[circle (range 1 11)]])
(defn item-card []
[:div.items-card-list
(for [item (vals coffee-shops)]
[:div.item-card
[:div.item-header
[:div.icon-title
[:div.icon-img
[:img.item-icon {:src (:img item)}]]
[:div.title-desc
[:p.item-title (:title item)]
[:p.item-desc (:description item)]
[:p.item-location (:location item)]
[:p (:level item)]]]
[:div.badge-ig
[:a {:href ""} "IG"]
[badge]]]
[fancy-level-list]
])])
like a github repo?
awesome
the file is items_list.cljs in the components folder
FYI the top 5 dirs that GitHub UI shows should all be in .gitignore
.
Looking at the code now...
Also, seems like you have main
set as the default branch, but it's almost empty and the actual code is in the master
branch. But no biggie here.
This code is definitely wrong:
{:background-color (map :level (vals coffee-shops) "green")}
You provide a lazy collection as a color. More than that - you're using map
in a way that you probably don't want to be using here.
I'm not sure exactly what you want to achieve here. Can you elaborate?Basically I want to change the background color of the circle component based on the level value in data.cljs
So I though to extract the respective numbers and then manipulate them which is probably not a solution
But your range of items has numbers from 1 to 10, and all the levels in the data NS have only 5, 3, and 8. And even those few are strings and not numbers.
Maybe that's exactly the problem that you were facing at the very start, with active?
seemingly not working - because in CLJS, as opposed to JS, (= 1 "1")
is actually false
.
Yep, the level values are strings and not numbers 😑