CODEWITHSUNDEEP
htmlcssreactjsreact-nativeselect
Stack Kiddy
Stack Kiddy

Reputation: 586

Custom Icon for Select Drop Down based on value reactjs

I am new to react. I am using ANT JS library. Here,I am using Ant js Select.

Here's my select code which looks like this

<div>
    <Form.Item label="Choose  Configuration" >
        {getFieldDecorator('select', {
            valuePropName: 'option',
            rules: [{ required: true }],
            onChange: (value) => { this.onConfigNameChange(value) },
             />

        })(
            <Select  mode="single" placeholder="Please select Configuration"  >
                {
                    this.state.dbConfigList.map((dbConfig) => (
                        <Option value={JSON.stringify(dbConfig)}>{dbConfig.name}</Option>
                    ))
                }
            </Select>
        )}
    </Form.Item>
</div >

In the dbConfigList, I have the object which looks like this.

(4) [{…}, {…}, {…}, {…}]
0: {id: 1, name: "first config", data: "{"host":"localhost","type":"elastic"}"}
1: {id: 2, name: "second config", data: "{"host":"129.242.3.3","type":"mysql"}"}
2: {id: 3, name: "third config", data: "{"host":"192.168.12.1","type":"mongo"}"}
3: {id: 4, name: "fourth config", data: "{"host":"localhost","type":"mysql"}"}

I will display the name in the drop-down select option as shown in the code above. Based on the name, I want to take the type from the data in the object. Next, I want to display the icon based on the type into the select drop-down list with the name attached to it.

Here's what i tried,

<Select  mode="single" placeholder="Please select Configuration"  >
    {
        this.state.dbConfigList.map((dbConfig) => (
            <Option value={JSON.stringify(dbConfig)}><Icon icon="database" iconSize={20} color="violet" />{dbConfig.name}</Option>
        ))
    }
</Select>

I passed the icon inside the Option. And it displayed like the image below, output i got(image)

I don't want the same color. I want to make icon color based on the type. Like green for mysql, violet for elastic and grey for mongo. I don't know how to make it possible. So how to make custom icon for value in select. I searched stack overflow but can't find any answers. Help me with some solutions.

Required Output:

enter image description here

Upvotes: 0

Views: 766

Answers (2)

tunapq
tunapq

Reputation: 362

You can define map of color like:

   const colorMap = {
      mysql : "green",
      elastic : "violet",
      mongo:"grey"
}

and use that:

<Select  mode="single" placeholder="Please select Configuration"  >
    {
        this.state.dbConfigList.map((dbConfig) => {
            var dbData = JSON.parse(dbConfig.data);
            return (
            <Option value={JSON.stringify(dbConfig)}>
                <Icon ... color={colorMap[dbData.type] || "red"} />{dbConfig.name}
            </Option>)
        })
    }
</Select>

Upvotes: 1

Faith Gaiciumia
Faith Gaiciumia

Reputation: 69

You could include color as an attribute to the objects in the dbConfigList: just like you have host and type add color. Then in your select code you have it this way:

<Select  mode="single" placeholder="Please select Configuration"  >
{
    this.state.dbConfigList.map((dbConfig) => (
        <Option value={JSON.stringify(dbConfig)}><Icon icon="database" iconSize={20} color={dbConfig.color} />{dbConfig.name}</Option>
    ))
}

Upvotes: 0

Related Questions