Fork me on GitHub

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"
   (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


Try with

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


On a quick look, I think you're forgetting to pass content into your render function - has some useful details


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


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


and I needed that tip about the keys 🙂


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


My work on getting Hooks working with Reagent is going on here: 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