CODEWITHSUNDEEP
reactjsantdant-design-pro
Sara
Sara

Reputation: 199

How to update Select Options value dynamically using ant design frame work

I have a combo box where I have multiple options like Executing, Suspended, Blocked and etc.. user can select any one of them, but by default there is one option called 'Executing' already selected

When server stars, data is coming from the backend lets say example Blocked, I am trying to update default value from Executing to Blocked, so that user can under what server is sending.

<Select size={"small"} className="mission-status">
                                <Option value="Executing">{missionStatusConts.MISSION_STATUS.EXECUTING}</Option>
                                <Option value="Completed">{missionStatusConts.MISSION_STATUS.COMPLETED}</Option>
                                <Option value="Blocked">{missionStatusConts.MISSION_STATUS.BLOCKED}</Option>
                                <Option value="Waiting">{missionStatusConts.MISSION_STATUS.WAITING}</Option>
                                <Option value="Offline">{missionStatusConts.MISSION_STATUS.OFFLINE}</Option>
                                <Option value="AllStop">{missionStatusConts.MISSION_STATUS.ALLSTOP}</Option>
                            </Select>

Attached image for reference

enter image description here

Looking for quick help, i spend almost one day in antd frame work to make it done, i could not get it..

Appreciate help

Upvotes: 3

Views: 3012

Answers (2)

4UmNinja
4UmNinja

Reputation: 542

Piggy backing off of shibashis answer, to make this a dynamic selector and to have a blank default, you'd have something like this:

<Select size={"small"} className="mission-status" defaultValue={undefined || null || ''}>
    {Object.keys(missionStatusConts.MISSION_STATUS).map(status =>
        (<Option value={status}>{status}</Option>)}
</Select>

Upvotes: 2

shibashis
shibashis

Reputation: 67

Select tag of antd has a property named defaultValue, which can be used to show initial value.
If you want to show 2nd option, then code will be:

<Select defaultValue='Completed' size={"small"} className="mission-status">
    <Option value="Executing">{missionStatusConts.MISSION_STATUS.EXECUTING}</Option>
    <Option value="Completed">{missionStatusConts.MISSION_STATUS.COMPLETED}</Option>
    <Option value="Blocked">{missionStatusConts.MISSION_STATUS.BLOCKED}</Option>
    <Option value="Waiting">{missionStatusConts.MISSION_STATUS.WAITING}</Option>
    <Option value="Offline">{missionStatusConts.MISSION_STATUS.OFFLINE}</Option>
    <Option value="AllStop">{missionStatusConts.MISSION_STATUS.ALLSTOP}</Option>
</Select>

For your reference: Antd select api

Upvotes: 2

Related Questions