Why React-intl not working inside ant-design?

Question

FormattedMessage not working inside Form.Item element of ant-design, if FormattedMessage outside Form.Item element working well. Help me!

FormattedMessage outside Form.Item element working well

<Form.Item label={<FormattedMessage id="formSignIn.emailField" />}>
    {form.getFieldDecorator('email', {
        rules: [{ required: true, message: <FormattedMessage id="formSignIn.emailValidate" />}],
    })(
        <FormattedMessage id="formSignIn.emailValidate">
            {placeholder => (
            <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder={placeholder} />
            )}
        </FormattedMessage>,
    )}
</Form.Item>

FormattedMessage not working inside Form.Item element of ant-design

score 5 · Answer 1 · answered Jul 16 '19 at 08:15

    class DemoForm extends React.Component {
        render() {
            const {getFieldDecorator} = this.props.form;
            const {intl} = this.props;
            const placeholder = intl.formatMessage({id:'enterHere'});

            return (
                 <Form.Item label={<FormattedMessage id='name'/>}>
                  {getFieldDecorator('name',)(<Input placeholder={placeholder}/>)}
                 </Form.Item>
            )
       }
}
export const Demo = injectIntl(Form.create()(DemoForm));

Use this Demo class for show your component.

Why React-intl not working inside ant-design?

1 Answers1