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

user_13652244 0
Viewed 1015

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

ant-design-pro antd reactjs
2 Answers

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

user_110737690

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>
user_25977040
Related