Fork me on GitHub
#reagent
<
2022-09-15
>
Ben Lieberman14:09:57

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

p-himik14:09:37

: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
p-himik14:09:08

You also don't need the :key metadata there.

Ben Lieberman14:09:18

that works, thanks :face_with_cowboy_hat:

👍 1
Ben Lieberman14:09:52

I confess I'm surprised I can create components inside others as I did with render-square

Ben Lieberman14:09:06

I figured that would be a big no-no

p-himik14:09:46

Nah, that's completely fine.

Lone Ranger15:09:07

some days, anything you can get to work is fine 😅

Chase05:09:09

@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.