input-example.cljs

(def macro-state
  (atom {:question ""
         :answer   ""}))

(defcc input-wrapper < rum/reactive [comp hint label ref]
  (mui/text-field {:hintText          hint
                   :multiLine         true
                   :fullWidth         true
                   :rows              2
                   :value             (rum/react ref)
                   :onChange          (fn [e]
                                        (reset! ref (.. e -target -value))
                                        (.forceUpdate comp))
                   :floatingLabelText label}))

(defc q&a <
  {:will-mount (fn [state]
                 (swap! macro-state
                        assoc :question (-> state :rum/args first))
                 (swap! macro-state
                        assoc :answer (-> state :rum/args second))
                 state)}
  [question answer]
  [:div.row
   [:div.col-xs-12.col-sm-10.col-sm-offset-1
    (input-wrapper
     "Ex: How do you remove all files from staging?"
     "Question"
     (rum/cursor macro-state [:question]))]
   [:div.col-xs-12.col-sm-10.col-sm-offset-1
    (input-wrapper
     "Ex: Ex: git reset HEAD -- ."
     "Answer"
     (rum/cursor macro-state [:answer]))]])