reagent 2022-10-05 | Slack Archive

Ben Lieberman15:10:54

I have a form inside a modal that I am using to send data to my backend. I was having issues with getting the form to update state on the component but I just resolved these. But when I click the button to send the data to the server, it sends back a successful response with the atoms I just updated as nil. This is what the component looks like:

(defn modal [] 
  (let [title (rc/atom nil)
        desc (rc/atom nil)
        add-book (fn [] (p/let [_resp (js/fetch "/books/" (clj->js {:method "POST"
                                                                    :body {:title @title :description @desc :status true}
                                                                    :headers {:Content-Type "application/json"}}))
                                data (.json _resp)]
                          (println data)))]
    [:div {:class "modal", :id "book-modal" :tab-index "-1", :role "dialog"}
     [:div {:class "modal-dialog", :role "document"}
      [:div {:class "modal-content"}
       [:div {:class "modal-header"}
        [:h5 {:class "modal-title"} "Add a book"]
        [:button {:type "button", :class "close", :data-dismiss "modal", :aria-label "Close"}
         [:span {:aria-hidden "true"} "×"]]]
       [:div {:class "modal-body"}
        [:div.d-flex.justify-content-center.text-center
         [:div.form-group
          [:div.form-label.text-white "Book"]
          [:input.form-control.m-2 {:type "text"
                                    :placeholder "Enter book title"
                                    :on-change (fn [e] (reset! title (.. e -target -value)))}]
          [:input.form-control.m-2 {:type "text"
                                    :placeholder "Book description"
                                    :on-change (fn [e] (reset! desc (.. e -target -value)))}]
          [:button.m-2 {:on-click #(add-book)} "Add book"]]]]
       [:div {:class "modal-footer"}
        [:button {:type "button", :class "btn btn-primary"} "Save changes"]
        [:button {:type "button", :class "btn btn-secondary", :data-dismiss "modal"} "Close"]]]]]))

p-himik15:10:30

You mean, that (println data) prints something like {:title nil, :description nil, :status true}?

Ben Lieberman15:10:24

Yes

Ben Lieberman15:10:51

It's a #js map that also includes an _id field from Mongo

p-himik15:10:56

Well, that's a backend issue then. Whatever your server sends, your client receives and has no control over.

Ben Lieberman15:10:58

Ok, I thought as much, I just wanted to be sure. I'm still shedding the burden of thinking about things explicitly as "props" and "state" and thought I might be doing something silly there. Thank you.

👍 1

p-himik15:10:58

Note also that it would be better to use a <form> tag with {:on-submit (fn [^js e] (.preventDefault e))}, and a :type :submit button (probably that "Add book"). This way, hitting Enter in any of the fields would just work and there's potential of autofilling software, like password and note managers, working better with such a form.

👀 1

2022-10-05

Channels