reagent 2020-02-05 | Slack Archive

Oz20:02:37

Hi, I'm trying to figure nesting components with local state. I have a form-2 component that fires a function that changes its local state when clicked.

(defn table-cell-simple "table cell component"
   [content]
   (let [clicked (reagent/atom false)]
     (fn [] [:td {:style  {:background (when @clicked "blue")} :on-click #(swap! clicked not)} "lorem ipsum"])))

This works all right, but when I try to render it like this:

(defn table-row "table row component" [row]
      [:tr (doall (map-indexed #((table-cell-simple %2)) row))]
  )

The color doesn't change, even though the function does get called, and the atom changes. Maybe the row gets re-rendered and undo the change? or is it something else? Any help wll be appreciated

p-himik20:02:18

Try with

(defn table-row [row]
  [:tr (for [cell-value row]
         [table-cell-simple cell-value]])

shaun-mahood20:02:20

On a quick look, I think you're forgetting to pass content into your render function - https://cljdoc.org/d/reagent/reagent/0.9.1/doc/frequently-asked-questions/why-isn-t-my-component-re-rendering-#props-change has some useful details

p-himik20:02:42

Note that my approach will issue a warning about a missing :key. If you have such a key, just specify it. If not, you can just use

(defn table-row [row]
  (into [:tr]
    (map (fn [cell-value]
           [table-cell-simple cell-value]))
    row))

Oz21:02:48

Thanks! @U2FRKM4TW it works now If I got it right, the problem was not using the reagent style square brackets around table-cell-simple, but for some reason reagent notation doesn't work with #() style? too much sugar maybe

Oz21:02:30

and I needed that tip about the keys 🙂

p-himik21:02:43

With #(), you created a new component each time something changed. With [], the existing component was updated. I think.

juhoteperi22:02:36

My work on getting Hooks working with Reagent is going on here: https://github.com/reagent-project/reagent/pull/477 It shows that there is some promise on getting Hooks working without completely breaking Reagent, but I don't have yet any idea what the performance is going to be with this approach.

👍 24

🖤 4

❤️ 8

2020-02-05

Channels