You might get better answers in #reagent But also, I wouldn't use a macro for that, it's an unnecessary complication.

Thanks. I want to avoid macro, too. however, nest-children doesn't work when I turn it to a function.

Did you remove that backtick upon turning it into a function?

oke this seems to work

(defn update-output [_]
  (gdom/setTextContent degree get-output-temp))

<h3 id="convertedUnit">F</h3>

I changed also this : (def degree (gdom/getElement "convertedUnit"))

Never mind , got it working with

(defn update-output [_]
    (gdom/setTextContent degree (get-output-temp))) 

Clojure 1.10.0
user=> (doc ns-publics)
-------------------------
clojure.core/ns-publics
([ns])
  Returns a map of the public intern mappings for the namespace.

ClojureScript 1.10.879
cljs.user=> (doc ns-publics)
-------------------------
cljs.core/ns-publics
([quoted-ns])
Macro
  Returns a map of the public intern mappings for the namespace.

Oh, I see. Which means it'll be already quoted in clojure but not in clojurescript.

Thank you

Your conclusion is the other way around - it will be quoted in CLJS since it's a macro. Fortunately for your implementation, the CLJ version of ns-publics also accepts a symbol. So you can just use a symbol there at all times. Might still be tricky given that one is an fn and the other is a macro.

Yeah, quite tricky

Have you gone through the links I provided before? One of them was with an example from the Reagent's website.

yep

but that one was not given a example of how to add a key before a {}

I don't understand what you mean. Why would you need to add it in front of {}?

The warning clearly mentions

([learn_cljs.weather.temperature {:label "Today", :value nil}]
 [learn_cljs.weather.temperature {:label "Tomorrow", :value nil}])

It talks about a seq, and that above is that seq.

It talks about every element in the seq, and an element of that seq would be each Hiccup vector.

Then Im confused

I did it here

(defn title []
  [:h1 (:title @app-state)])

(defn temperature [temp]
  [:div {:class "temperature"}
   [:div {:class "value"}
    (:value temp)]
   [:h2 (:label temp)]])

(defn postal-code []
  [:div {:class "postal-code"}
   [:h3 "Enter your postal code"]
   [:input {:type "text"
            :placeholder "Postal Code"
            :value (:postal-code @app-state)
            :on-change #(swap! app-state assoc :postal-code (-> % .-target .-value))}]
   [:button {:on-click get-coordinates} "Go" ]])

(defn app []
  [:div {:class "app"}
   [title]
   [:div {:class "temperatures"}
    (for [temp (vals (:temperatures @app-state))]
      ^ {key [temperature temp]}[temperature temp])]
   [postal-code]])

the part that the error message is talking about looks like this

(defonce app-state (r/atom {:title "WhichWeather"
                            :latitude 0
                            :longitude 0
                            :postal-code ""
                            :temperatures {:today {:label "Today"
                                                   :value nil}
                                           :tomorrow {:label "Tomorrow"
                                                      :value nil}}}))

In your code, that seq above is generated with this code:

(for [temp (vals (:temperatures @app-state))]
  [temperature temp])

(for [[temp-id temp] (:temperatures @app-state)]
  ^{:key temp-id}
   [temperature temp])

But given that: • Maps are inherently unordered • You just have two items in that map here's how I'd rewrite it:

(let [{:keys [today tomorrow]} (:temperatures @app-state)]
  [temperature today]
  [temperature tomorrow])

> the part that the error message is talking about looks like this The error you posted in the main channel clearly doesn't talk about that defonce at all. Why do you think the definition of your app-state is relevant here?

oke, so that key instead of the for loop

that code is given by the book

I think it is relevant because it pointing to that code label: Today : value nil

That's just the value of temp. It doesn't talk about your actual code, it only talks about the value it receives. It's a run-time warning, not a compile-time one - it doesn't check your code, it only checks the values.

> that code is given by the book Right. Not a great look for that book TBH.

I know. we discussed that earlier

I tried that key thing but still the same runtime error

(defn app []
  [:div {:class "app"}
   [title]
   [:div {:class "temperatures"}
    (for [temp (vals (:temperatures @app-state))]
      ^ {key  temp}[temperature temp])]
   [postal-code]])

What you wrote is completely different from what I wrote.

:key is not the same as key. temp is not the same as an identifying value.

Use my code. Confirm that it results on no warnings. Then go through the React documentation on keys while keeping my code in mind, along with the fact that ^{:key x} in front of a Hiccup vector results in assigning a React key to the resulting React element. BTW that ^{...} construct just assigns metadata. So ^{...} [...] is sugar for (with-meta [...] {...}). And Reagent uses :key metadata to assign keys to React elements.

so this instead of the for loop

(let [{:keys [today tomorrow]} (:temperatures @app-state)]
  [temperature today]
  [temperature tomorrow])

hmm, this breaks the layout

(defn app []
  [:div {:class "app"}
   [title]
   [:div {:class "temperatures"}
    (let [{:keys [today tomorrow]} (:temperatures @app-state)]
  [temperature today]
  [temperature tomorrow])]
   [postal-code]])

No, I meant the loop, given that it's the only one of the two code examples I provided that still needs the :key.

The layout breakage is surprising, given that the resulting markup should be exactly the same.

I did use the loop and that one works perfect without any error messages

maybe I have to find a better book/tutorial to learn clojurescript

The ClojureScript website has a selection of materials: https://clojurescript.org/community/resources

Thanks