Add a unique ID to widget props

[chmac]

I'm trying to use a stateless widget like so:

'ui:widget': (props) ->
  <input type="checkbox" id="ID"/><label htmlFor="ID">I agree</label>

The issue is generating the ID. I could obviously use a real component and do it inside the component. I could hope the component only loaded once (ouch). I could also probably hack the onChange into the onClick of the label. But all of those options aside, would it make sense for the package to generate a unique ID for each field and pass it in? _.uniqueId() maybe?

[chmac]

OK, I see the error of my ways here. The widget doesn't render the <label>, it only renders the input. The label is rendered as well as whatever I supply for ui:widget. I guess the id question remains, even though my example no longer makes sense. My example does raise a different question, how I could replace a whole component, including the label, but that's for a separate issue...

[n1k0]

I'm surprised your code snippet works; JSX requires to have a single root element, so you should use something like this:

'ui:widget': (props) ->
  <div><input type="checkbox" id="ID"/><label htmlFor="ID">I agree</label></div>

Note that wrapping the input within the label would prevent duplicating the id information while keeping clicks on the label activating the input:

'ui:widget': (props) ->
  <label><input type="checkbox" id="ID"/>I agree</label>

For unique id generation, the issue is probably to persist them along the entire lifecycle of the component, so that means persisting this in comp state, or keeping a whole tree of nested ids in root component state.

To be noted, maybe #45 would help achieving what you're after here.

Also, we don't have identified use cases for this in our current projects using this lib; so would you be willing to work on implementing this?

[n1k0]

I'm trying to use a stateless widget (...) I could hope the component only loaded once (ouch)

Stateless components are indeed fully rendered every time they receive props. If you want to "initialize" a component, eg with something generated once attached to it, you need state, hence you can't use stateless components.

[n1k0]

We now have generated unique ids for form widgets (docs).

[chmac]

@n1k0 Yet more awesomeness from y'all. Thanks.