0

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

New contributor
Stack Kiddy is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
1

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>
New contributor
tunapq is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
  • Thanks.. But the data is in the form of string. How to JSON parse the data and get the type from it. – Stack Kiddy Nov 9 at 15:49
  • Is there a problem with JSON.parse(dbConfig) ? – Auticcat Nov 9 at 15:51
  • @ Auticcat, I can't get the type from the data.dbConfig.data.type. It come as empty. – Stack Kiddy Nov 9 at 15:55
  • @Kiddy you can use var dbData = JSON.parse(dbConfig.data) and access type with dbData.type – tunapq Nov 9 at 15:57
  • @tunapq, but where to put the JSON.parse. If i created a new dbdata, then how to map it to select. I mapped select with dbconfig list. how to use dbdata in it – Stack Kiddy Nov 9 at 16:06
0

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>
    ))
}

New contributor
Faith Gaiciumia is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
  • Thanks for the response. I have added the color in the data. The data is in the form of string. How to JSON parse the data and get the color from it. – Stack Kiddy Nov 9 at 15:47
  • could you post the new dbConfig list? – Faith Gaiciumia Nov 9 at 15:59
  • (4) [{…}, {…}, {…}, {…}] 0: {id: 1, name: "first config", data: "{"host":"localhost","type":"elastic", "color":"blue"}"} 1: {id: 2, name: "second config", data: "{"host":"129.242.3.3","type":"mysql","color":"green"}"} 2: {id: 3, name: "third config", data: "{"host":"192.168.12.1","type":"mongo","color":"grey"}"} 3: {id: 4, name: "fourth config", data: "{"host":"localhost","type":"mysql","color":"green"}"} – Stack Kiddy Nov 9 at 16:09
  • Here data is in the form of string – Stack Kiddy Nov 9 at 16:11
  • dbConfig[0].data.color should return blue. try displaying this on your console to make sure you are able to get the color attribute first. also, i think its already a string so no need for conversion. the trick is to ensure you are actually getting a value for color – Faith Gaiciumia Nov 9 at 16:21

Your Answer

Stack Kiddy is a new contributor. Be nice, and check out our Code of Conduct.

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.