reagent

A minimalistic ClojureScript interface to React.js http://reagent-project.github.io/
jmckitrick 2020-10-12T13:54:58.056600Z

Any idea why this would work fine:

jmckitrick 2020-10-12T13:54:59.056800Z

[:button {:on-click #(save-form acct)} "Save"]

jmckitrick 2020-10-12T13:55:06.057Z

while this would generate a react error:

jmckitrick 2020-10-12T13:55:15.057300Z

[:input {:type "button"} "Save"]

jmckitrick 2020-10-12T13:55:17.057500Z

of the type:

jmckitrick 2020-10-12T13:55:45.057800Z

' input is a void element tag and must neither have children nor use dangerouslySetInnerHTML.'

p-himik 2020-10-12T13:57:10.057900Z

Because <input> and <button> are different HTML elements.

2020-10-12T13:59:17.058100Z

You want to either make “Save” into a placeholder attribute on the input, or else add a label element to contain the “Save” text.

jmckitrick 2020-10-12T14:00:17.058300Z

ok, thanks!

p-himik 2020-10-12T14:22:22.058500Z

Just in case - according to MDN, it's the value attribute, not the placeholder.

p-himik 2020-10-12T14:22:30.058700Z

Either way, it's better to use :button.

2020-10-12T14:25:49.058900Z

That depends on what you want “Save” to function as. If you set value to be “Save,” then it will change if you edit the text in the input, but if you want “Save” to function as a label when the input is empty, then you want to assign it to the placeholder attribute.

p-himik 2020-10-12T14:26:33.059100Z

What text in what input? <input type="button"> will be rendered as a button, there's nothing editable there.

2020-10-12T14:38:51.059300Z

Oh, true, I was thinking of text inputs.

2020-10-12T14:40:11.059500Z

Skimmed right over the {:type "button"} bit, derp 🤦