CODEWITHSUNDEEP
clojureclojurescript
Jessie Richardson
Jessie Richardson

Reputation: 958

Image Won't Update with Swap

The following code displays 5 different emojis at the bottom of the screen, and 1 emoji in the upper center. I am trying to make it so that when one of the emojis on the bottom is clicked, that same emoji appears at the top center. I am able to update the atom that contains the emoji history with :on-click, but the image does not update with the current url.

(def emoji-history
    (atom {:current "img/sad-tears.png"}))

(defn Img40 [src reaction]
 [:img {:src src
        :style {:width "60px"
                :padding-right "20px"}
        :on-click #(do
                    (js/console.log (get @emoji-history :current))
                    (swap! emoji-history assoc :current src)
                    (js/console.log (get @emoji-history :current)))}])

(defn CurrentEmoji []
          [:img {:style {:width 40 :margin-top 15}
                 :src (get @emoji-history :current)}])

(defn EmojiDisplay []
    [:div {:style {:text-align "center"}}
     [CurrentEmoji]
     [:div {:style {:text-align "center"
                    :margin-top "200px"
                    :padding-left "20px"}}
      [Img40 "img/smile.png" "happy"]
      [Img40 "img/sad-tears.png" "sad"]
      [Img40 "img/happy-tears.png" "amused"]
      [Img40 "img/surprised.png" "surprised"]
      [Img40 "img/angry.png" "angry"]]])

Upvotes: 1

Views: 61

Answers (1)

Scott
Scott

Reputation: 17257

Refer to the reagent.core namespace and use a Reagent atom like this:

(ns my-name.space.etc
  (:require [reagent.core :as r]))

(def emoji-history
  (r/atom {:current "img/sad-tears.png"}))

The line of code that you have here...

(swap! emoji-history assoc :current src)

...where you swap! your atom's value, that is correct :-)

Unlike a plain old Clojure atom, when a Reagent atom's value (state) is changed, a re-render of the UI is triggered.

Rarely is the entire UI re-rendered, though. Because Reagent wraps React, the React system will work out the minimal required changes to the DOM, so it's pretty efficient.

Upvotes: 4

Related Questions