CODEWITHSUNDEEP
antd
adavia
adavia

Reputation: 423

Setting default initial values for select multiple component

Using the select component i am having a hard time trying to set initial values. As the docs. says im suppose to fill in the value prop with only string|number|string[]|number[]. Now the problem with this is that i need to show text on the input and send an id value on submit, but with this you show the same value you send.

<Select
        mode="multiple"
        defaultValue={tags} // => would need something like tags = [{id: 1, name: "Science"}]
        placeholder="Select tags"
        onSearch={this.fetchTags}
        onChange={this.handleChange}
        style={{ width: '100%' }}
      >
        {tags.map(tag => <Option value={tag.id} key={tag.id}>{tag.name}</Option>)}
      </Select>

Upvotes: 3

Views: 7086

Answers (2)

Hokku San
Hokku San

Reputation: 324

You can use value instead of defaulValue. Here is a sample code from my project:

const stateTasksOptions =
    this.tasksStore.filters.init.state.map(item =>
        <Select.Option key={item.id} value={item.id} title={<span className={`${item.id}Label`}>{item.title}</span>}>
            <span className={`${item.id}Label`}>{item.title}</span> - <span class="normal-text">{item.help}</span>
        </Select.Option>
    )

return (
    ....
    <Select
        mode="multiple"
        value={this.tasksStore.filters.selected.state.map(d => d)}
        onChange={this.handleTasksStatus}
        optionLabelProp="title"
    >
        {stateTasksOptions}
    </Select>
    ....
)

And some css for colorizing.

Result: enter image description here

this.tasksStore.filters.init.state looks like:

state = [
    {id: "done", title: "Исполнена", help: "исполнены после 24.04.2017"},
    {id: "active", title: "В работе", help: "текущие задачи"},
    {id: "planned", title: "Запланирована", help: "задачи на будущее"},
    {id: "missed", title: "Просрочена", help: "срок исполнения истек"},
    {id: "archived", title: "Архив", help: "выполнены ранее 24.04.2017"}
]

Upvotes: 3

adavia
adavia

Reputation: 423

So "labelInValue" is what i really needed in case anyone else experience the same problem.

Upvotes: 5

Related Questions