CODEWITHSUNDEEP
reactjsantd
user575219
user575219

Reputation: 2440

React antd design select inside a table

I can't get the selected value to be populated and the header for this column in antd table.

In the database Index=AccountNumber , keyword value = 102 which is Account Number. The initial load is not being set. Account number is in the dropdown list of available values but not being set. Its blank when the page loads initially

enter image description here

Page Loads like this with no selected value for the lookup. enter image description here

I want it like this where it is hardcoded value to "Account Number" for test reasons. In reality I want it to be actually populated like a lookup where keyvalue 102=Account number.

enter image description here

This is a select dropdown inside a table. The table has 2 columns.
enter image description here Datasource for the table is selecteIndexTypeKeyTypes which is a IEnumerable of this class enter image description here

Datasource for the dropdown is IEnumerable of this class enter image description here

Updated: enter image description here

Upvotes: 2

Views: 6705

Answers (2)

JayCodist
JayCodist

Reputation: 2544

The value property passed into the Select component is meant to be the corresponding value property of the desired Option child. Not simply a text value. Change your code to something like this:

constructor(props) {
   super(props);
   this.state = {
       selectValue: "initial-value",
       ...
   };
}

...
<Select
  value={desKeywordTypeList.length ? (desKeywordTypeList.find(r => /account\snumber/i.test(r.keywordTypeName)) || {}).keywordTypeId : this.state.selectValue}
  onChange={...}>
   {
      desKeywordTypeList.length ? desKeywordTypeList.map(record => (
      <Option key={record.keywordTypeID} value={record.keywordTypeID}>
        {record.keywordTypeName} ({record.keywordTypeID})
      </Option>
      :
      <Option value={this.state.selectValue} key={this.state.selectValue} >Account Number</Option>
   }
</Select>

Upvotes: 2

omega-nitro-zeus-x0
omega-nitro-zeus-x0

Reputation: 479

maybe work with defaultValue or initialValue property


<Select defaultValue={...} mode="multiple" placeholder="Assign roles for this user">
    <Select.Option value="role_admin">Administrator</Select.Option>
    <Select.Option value="role_seller">Seller</Select.Option>
    <Select.Option value="role_customer">Customer</Select.Option>
  </Select>


{getFieldDecorator('roleList', {
  initialValue: user.roleList || [],
  rules: [
    { required: false, message: 'Assign roles for this user', type: 'array' },
  ],
})(
  <Select mode="multiple" placeholder="Assign roles for this user">
    <Select.Option value="role_admin">Administrator</Select.Option>
    <Select.Option value="role_seller">Seller</Select.Option>
    <Select.Option value="role_customer">Customer</Select.Option>
  </Select>
)}

Upvotes: 1

Related Questions