reagent

A minimalistic ClojureScript interface to React.js http://reagent-project.github.io/
2021-06-10T03:19:41.084700Z

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"))

2021-06-10T03:20:13.085400Z

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

2021-06-10T03:20:17.085600Z

Any ideas?

jkxyz 2021-06-10T06:48:03.087600Z

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

2021-06-10T07:11:50.089900Z

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

juhoteperi 2021-06-10T07:25:15.091500Z

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)

1๐Ÿ™
Brice Ruth 2021-06-10T18:12:43.093Z

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 (-&gt; % .-target .-value))}] [:br]
   "Liters " [:input {:value @liters :on-change #(reset! liters (-&gt; % .-target .-value))}] [:br]
   [gradingResult]])

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

Lu 2021-06-12T17:12:06.097700Z

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

Brice Ruth 2021-06-10T18:13:01.093100Z

Sorry, Slack submitted before I got my question in

Brice Ruth 2021-06-10T18:14:09.093300Z

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 Ruth 2021-06-10T18:14:31.093500Z

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

Brice Ruth 2021-06-10T18:14:47.093700Z

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

Brice Ruth 2021-06-10T18:15:43.094Z

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

juhoteperi 2021-06-10T18:19:01.094200Z

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

Brice Ruth 2021-06-10T18:19:22.094400Z

ohhh

Brice Ruth 2021-06-10T18:19:31.094600Z

:thanks3:

juhoteperi 2021-06-10T18:21:19.094800Z

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 Ruth 2021-06-10T18:26:22.095Z

yeah, that makes total sense! Thank you so much ๐Ÿ™‚ Just grabbed cljs.reader/read-string and I'm in business ๐Ÿ˜„

juhoteperi 2021-06-10T19:07:19.095200Z

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