This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2022-09-15
Channels
- # ai (35)
- # announcements (3)
- # babashka (16)
- # babashka-sci-dev (2)
- # beginners (37)
- # biff (16)
- # calva (5)
- # cider (2)
- # clj-commons (81)
- # clj-kondo (29)
- # cljfx (2)
- # cljs-dev (4)
- # clojars (4)
- # clojure (92)
- # clojure-europe (72)
- # clojure-losangeles (8)
- # clojure-nl (1)
- # clojure-norway (10)
- # clojure-uk (1)
- # clojurescript (20)
- # clojutre (2)
- # conjure (2)
- # data-science (18)
- # datomic (1)
- # emacs (10)
- # fulcro (49)
- # joyride (1)
- # kaocha (23)
- # leiningen (8)
- # lsp (14)
- # meander (5)
- # off-topic (93)
- # polylith (4)
- # re-frame (20)
- # reagent (9)
- # reitit (2)
- # remote-jobs (8)
- # sci (1)
- # shadow-cljs (21)
- # testing (3)
- # vim (27)
- # xtdb (35)
I'm concerned that there's possibly several things wrong with this (namely render-square
):
(defn board []
(let [init (into [] (repeat 9 nil))
state (r/atom init)
handler (fn [i] (swap! state assoc i \X))
render-square (fn [i] [:button
{:class-name "square"
:on-click handler}
(nth @state i)])]
(fn [] [:div
[:div {:class-name "status"} "Next player is: " @next-player]
[:div {:class-name "board-row"}
^{:key 1} [render-square 0]
^{:key 2} [render-square 1]
^{:key 3} [render-square 2]]
[:div {:class-name "board-row"}
^{:key 4} [render-square 3]
^{:key 5} [render-square 4]
^{:key 6} [render-square 5]]
[:div {:class-name "board-row"}
^{:key 7} [render-square 6]
^{:key 8} [render-square 7]
^{:key 9} [render-square 8]]])))
but I'm confused by this error key to assoc must be a number
which is what I get when I click on anything:on-click handler
- the handler
will be called with an instance of MouseEvent
. You probably want to instead write it as :on-click (fn [_evt] (handler i))
.
👀 1
I confess I'm surprised I can create components inside others as I did with render-square
I figured that would be a big no-no
some days, anything you can get to work is fine 😅
@U03QBKTVA0N Just a quick fyi, even though React uses className
you can still just use class
in Reagent. You can also use the shortcut syntax of :div.my-class
if you like that too. That shortcut also works on id's
like :div#my-id
as well.