Fork me on GitHub
#reagent
<
2021-06-10
>
clumsyjedi03:06:41

I'm trying to get an element in my DOM like

<option value>Foo</option>
I found a tutorial online that suggests I could do it as
(reagent.dom/render [:option {:value true} "Foo"] (js/document.getElementById "root"))

clumsyjedi03:06:13

But's the true is getting stringified to "true" when injected into the DOM

jkxyz06:06:03

@clumsyjedi The value attribute on <option> is required to be a string: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option So <option value>Foo</option> wouldn’t be valid because it’s not a boolean attribute. You could do [:option {:value ""} "Foo"]

clumsyjedi07:06:50

Thanks @josh604. Does this mean reagent is aware of the valid attributes for different html elements? Or react is?

juhoteperi07:06:15

In this case, the HTML itself just doesn't allow any other types than string. (React is/was also aware of some attributes, but not that much anymore: https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html)

🙏 3
Brice Ruth18:06:43

Good afternoon ... I'm having a weird situation with a very simple starter project I'm doing to learn reagent. Here's the entirety of the code:

(ns grader.core
  (:require [reagent.dom :as rdom]
            [reagent.core :as r]
            [clojure.string :as str]))

(defonce gallons (r/atom 0))
(defonce liters (r/atom 0))

(defn gradingResult []
  (let [grade (if (= @liters (* @gallons 3.785))
                 "correct"
                 "incorrect")]
    [:span "Grade " grade]))

(defn grader []
  [:div
   "Gallons " [:input {:value @gallons :on-change #(reset! gallons (-> % .-target .-value))}] [:br]
   "Liters " [:input {:value @liters :on-change #(reset! liters (-> % .-target .-value))}] [:br]
   [gradingResult]])

(defn ^:export run []
  (rdom/render [grader] (js/document.getElementById "app")))

Brice Ruth18:06:01

Sorry, Slack submitted before I got my question in

Brice Ruth18:06:09

So, this renders and if I change the first input, gallons, to a different value, the grade changes between correct & incorrect ... e.g., change 0 -> 1 and it becomes incorrect, change back to 0, it returns to correct

Brice Ruth18:06:31

if I do the same with liters - change 0 -> 1 and it turns incorrect, but reverse it and it just stays incorrect

Brice Ruth18:06:47

I'm sure I'm missing something super obvious, but I can't for the life of me figure out what it is

Brice Ruth18:06:43

I should be able to put in 1 for gallons and 3.785 for liters and have it reflect correct, but I cannot.

juhoteperi18:06:01

Input values are strings. You need to coerce them to numbers yourself.

juhoteperi18:06:19

JS does funny things if you use math operations with strings, like "11" * 3.785 is a number again, but the liters value will be string always

Brice Ruth18:06:22

yeah, that makes total sense! Thank you so much 🙂 Just grabbed cljs.reader/read-string and I'm in business 😄

juhoteperi19:06:19

Better to just use parseInt or parseFloat, you (probably) don't want someone inserting Cljs datastructures there, even if read-string doesn't allow eval

Lu17:06:06

Maybe worth to say that those functions can be invoked via interop i.e. (js/parseFloat ”23”)