Skip to content

Instantly share code, notes, and snippets.

@spradnyesh
Last active February 10, 2024 20:36
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save spradnyesh/e64770bd276ddb99d60b81ac5b0f6ead to your computer and use it in GitHub Desktop.
Save spradnyesh/e64770bd276ddb99d60b81ac5b0f6ead to your computer and use it in GitHub Desktop.
:default-value of :input in reagent when rendering form multiple times
(ns foo
(:require [reagent.core :as r]))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;;;; global app-state
(defonce app-state (r/atom {}))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;;;; UI components
(defn to []
[:form {:on-submit (fn [e] (swap! app-state assoc :page "from"))}
[:input {:default-value "hi there"}]
[:button "Submit"]])
(defn from []
[:form {:on-submit (fn [e] (swap! app-state assoc :page "to"))}
[:button "Click Me"]])
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;;;; init system
(defn main []
(condp = (:page app-state)
"from" [from]
"to" [to]))
(defn mount-root
"init function:
- initializes global state
- attaches component 'main' to '#app' element in index.html"
[]
(reset! app-state {:page "from"})
(r/render [main] (.getElementById js/document "app")))
(.addEventListener js/document "deviceready" mount-root false)
(ns foo
(:require [reagent.core :as r]))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;;;; global app-state
(defonce app-state (r/atom {}))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;;;; UI components
(defn to []
[:form {:on-submit (fn [e] (swap! app-state assoc :page "from"))}
[:input {:default-value "hi there"
:value (:val @app-state)
:on-change (fn [e] (swap! app-state assoc :val (.. e -target -value)))}]
[:button "Submit"]])
(defn from []
[:form {:on-submit (fn [e] (swap! app-state assoc :page "to" :val nil))}
[:button "Click Me"]])
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;;;; init system
(defn main []
(condp = (:page app-state)
"from" [from]
"to" [to]))
(defn mount-root
"init function:
- initializes global state
- attaches component 'main' to '#app' element in index.html"
[]
(reset! app-state {:page "from"})
(r/render [main] (.getElementById js/document "app")))
(.addEventListener js/document "deviceready" mount-root false)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment