FormField support label shorthand

[GautierT]

I would like to pass some html to my label in my radio button. But the html is not rendered.

<Form.Field>
    <label>Quel est le motif de votre inscription ?</label>
    <Field name="test" component={DefaultRadio} type="radio" label="<b>Value : 0</b>" value="0"/>
    <Field name="test" component={DefaultRadio} type="radio" label="Value : 1" value="1"/>
</Form.Field>

Field is a specific component from redux-form

class DefaultRadio extends Component {
    render() {
        const {input, meta, ...rest} = this.props;
        return (
            <Form.Field control={Radio} {...input} {...rest} />
        );
    }
}

Expected Result

.... Value : 0

Actual Result

.... Value : 0

Version

0.58.2

[levithomason]

Could you provide a codepen? The rendered HTML needs to be inspected in this case.

[GautierT]

Hi @levithomason !
Here it is !
http://codepen.io/GautierThiriez/pen/MbvNJE

[layershifter]

@GautierT You pass HTML as string while you should pass it as JSX expression:

<DefaultRadio label={<b>This should bold</b>} />

http://codepen.io/layershifter/pen/qqXeGz

[GautierT]

😳 Of course... Thanks @layershifter

[GautierT]

@layershifter : I tried your code. It's working but now i have an error. (I failed to reproduce it in the codepen or in the doc... )
Warning: Failed prop type: Invalid prop `label` of type `object` supplied to `FormField`, expected `string`.
or
Warning: Failed prop type: Invalid prop `label` of type `object` supplied to `Checkbox`, expected `string`.
Should i convert my react element to html before passing it in <Form.Field /> ?

[levithomason]

Thanks for the report. The codepen uses the minified build which does not log prop type warnings.

The component currently will render any node the way it is written, but it is intended to be a string as the value of the label prop is nested in a <label /> element. If you pass a <div/>, for instance, it will render but the markup will be invalid HTML as a <div /> as a child of a <label />.

I would accept a PR that updates the FormField label prop to use a shorthand factory:

htmlLabel.create(props.label)

// vs the current

<label>{props.label}</label>

This way you can pass string, number, props object, or another element and it will work correctly with valid markup:

label='my label'                   // <label>my label</label>
label={123}                        // <label>123</label>
label={{ children: 'foo' }}        // <label>foo</label>
label={<div className='label' />}  // <div class="label"></div>
label={<MyComponent />}            // ...what ever your component renders

[levithomason]

I've updated the issue to reflect my latest comment on this.