Does the JS console have any errors?

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

yes, that should render it

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?

not sure what the circle component is

what does it need as argument

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

You have the same issue with map btw

map needs to be wrapped in a doall otherwise it won't do anything,since it is lazy

Ohh yeah it’s just to render it on my page to see when it renders 😆

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! 🙂

I don't see anything obvious wrong with your code. so syntax wise you are ok

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

If you create a public MRE, I can take a look.

like a github repo?

Yep.

awesome

With proper instructions on how to run it.

Uploaded here https://github.com/itaydre/coffee-tlv/tree/master

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.

yes yes, I’m quite new to this, so still learning 😉

This code is definitely wrong:

{:background-color (map :level (vals coffee-shops) "green")}

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 😑

It seems to be working now!

Thanks a ton!