How can I pass an attribute to an html element like checked here <input type="radio" name="sb" id="sb-2" checked> ?

I'm trying to create a reagent component from segmented-control here http://code.fstgerm.com/pure-css-segmented-controls/ and it requires checked to be set on an element.

@achikin

[:input#sb-2
{:type "radio" :name "sb" :checked true}
]

https://purelyfunctional.tv/guide/reagent/

@achikin ☝️

I tried uploading a screenshot but not sure if it landed (got a notice from slack saying not enough space). Anyways search for checkbox or boolean and you will find you exact example explained

@gadfly361 it has landed, I can see it. Yes, do remember that guide. But in reagent 0.8.1 that does not work :man-shrugging:

@ericnormand have you checked it recently? ☝️

@gadfly361 my only guess is that it does not work for "radio" but works for "checkbox"

@achikin It works, I just tried it with reagent 0.8.1 from a fresh template

@achikin I have not checked that in a while

@gadfly361 for me {:checked true} simply removes checked completely...

what browser?

@ericnormand chromium Version 66.0.3328.0 (Developer Build) (64-bit)

@achikin Can you try from a fresh template lein new reagent-frontend mytest?

My guess is something else is mucking it up if you are using chromium (perhaps a lein clean is needed or a hard page refresh)

trying it now ...

seems to work for me

@achikin do you mind sharing a small gist?

(defn home-page []
  [:div
   [:h2 "Welcome to Reagent"]
   [:input {:type "radio" :checked true}]])

this is in Chrome

I also think this behavior is directly from React

it's not a reagent or hiccup thing

@ericnormand have you checked the page source?

For me it renders checked, but does not add checked attribute.

ah

yes, it renders checked but does not have the attribute

that's true

https://github.com/facebook/react/issues/961#issuecomment-257949668

Moreover, {:checked "checked"} also does not add checked in a test example (but works on my actual app)

mine doesn't show checked in the inspector

but the css still picks up the :checked attribute

@achikin Your true and checked versions appear to provide the same result at least

it may just be an inpector thing

does the styling work, @achikin?

and when I look at the page you linked with the components, the inspector shows the same thing

checked does not change as you click on elements

@ericnormand @gadfly361 the only difference I can spot between my real app and an example is that example uses reagent-provided react 16.3 and I'm using react 16.4 from npm

so in your code :checked true still does not work, but :checked "checked" does?

@ericnormand yes, right.

https://github.com/facebook/react/issues/7051

They say that you should not rely on checked being rendered as an attribute...

ah

so it's all the way down to react

But it seems that http://code.fstgerm.com/pure-css-segmented-controls/ relies on it's presence and has some css selectors, that query for checked attr

Ahh gotcha, this all makes more sense now

that makes sense

so instead of true/false, you can use nil/"checked"

@ericnormand probably on some versions of React 😞

or you could switch the [checked] selectors to :checked selectors (??)

@ericnormand as soon as I copied the whole css into my resources - that'd be the best option, thank you!

you're welcome 👍

thanks for bringing this issue to my attention

I am exploring a reactjs template that imports images using the ES6 syntax ( e.g : import logo from "../assets/img/logo.png", and after compiling the JSX into JS and importing it with shadow-cljs, the image is not being rendered. Has someone here had this experience before?

@mateus.pimentel.w this is dependent on how you compiled the JSX into JS

importing images is not standard JS, it’s implemented in a JS build tool like webpack

are you using webpack to build the JSX into a bundle?

ooh, i just figured out that it may be this the case

i’m not using webpack tho

i will ask if it is possible to integrate webpack with shadow-cljs and still get optimized compilation

you should. you might have to tweak webpack’s output a bit

webpack is pretty complicated

i’m surprised that not many people seems to use JSX with cljs. I mean, there are some people, but i tought that almost everybody would do it

@mateus.pimentel.w how or why would anyone want to use JSX? the syntax is downright horrific.

as for images via import that is not supported in shadow-cljs

I’ve thought about on a number of occasions of getting drunk and writing a CLJSX macro

if only to aid in copy + paste examples