Cuba React front-end: Using optionsContainer assigned to simple list of options

Support
#1

I am using a Field component in my app using the following code:

                  <Field
                    entityName={Registration.NAME}
                    propertyName="gender"
                    form={this.props.form}
                    formItemOpts={{ style: { marginBottom: "12px" } }}
                    getFieldDecoratorOpts={{
                      rules: [{ required: true }]
                    }}
                  />

That gives me a simple textbox.
How do I convert that code so that I have a dropdown component with the following options:
M = Male
F = Female
(i.e. Store “M” or “F” depending on Option selected.

I know that I can use:

optionsContainer={this.genderDc}

However I do not want to have to read a collection from the entities in the back-end. I want a simple hard-coded options list

#2

I discovered that using the following code works:

<Form.Item label={<Msg entityName={Registration.NAME} propertyName='gender' />}
  key='gender'
  style={{ marginBottom: '12px' }}>{
    getFieldDecorator('gender',
      {
        rules: [{ required: true, message: "Gender must be specified" }]
      }
    )
      (
        <Select>
          <Option value="M">Male</Option>
          <Option value="F">Female</Option>
        </Select>
      )}
</Form.Item>

Is there a simpler method ?

#4

Hello @robert.gilbert,

What Field does is that it returns a Form.Item containing an appropriate component based on entity attribute type. I assume that gender is a String attribute, which is why it uses an Input.

I’d suggest to change gender to be an enum instead. In that case Field will use a Select automatically, and it will even automatically populate the options with the enum values obtained from backend. If later you add additional enum values, you won’t need to change the frontend code.