Remove Edit and delete button appearing in select box reactJS

Question

I am new to reactJS. I have a select option.

I want to add delete and edit button inside the select option.

Here's the code i tried,

<Select
    style={{ width: 240 }}
    placeholder="Choose Web Analytics Configuration"
    dropdownRender={menu => (
    <div>
        {menu}
        <Divider style={{ margin: '4px 0' }} />
        <div
            style={{ padding: '4px 8px', cursor: 'pointer' }}
            onMouseDown={e => e.preventDefault()}
            onClick={this.openModal.bind(this)}
        >
            <Icon type="plus" /> Add  Database
        </div>
    </div>
    )}
        >
    {dbConfigList.map(item => (
        <Option  key={item}>{item} 
        <Icon onClick={this.editFun.bind(this)} type="edit" style={{ fontSize: '20px', color: 'green' }} theme="outlined" /> 
        <Icon onClick={this.deleteFun.bind(this)} type="delete" style={{ fontSize: '20px', color: '#CC160B' }} theme="outlined" /> 
        </Option>

    ))}
</Select>

I have successfully added the buttons. Here it looks like:

But when the User selects the option, the edit and delete button appears in the select box. I only needed the name to be shown and not buttons.

Here it looks like,

Help me with some solutions to fix it and inside the dropdown menu of every each option, I want the edit and delete buttons to be appeared at the right corner. Now it was appearing after the text. i can use margin for that. but every name size differs. Ex. Some names will be 6 characters and some will be more than 6 characters. Help me with some solutions.

Answer 1

Check the below example, you need to prevent your <Icon> as I had done for '+ -'

should be like:

{
  dbConfigList.map(item => (
    <Option key={item}>
      {item}
      {selectedValue !== item // you need to add state 
      <Icon
        onClick={this.editFun.bind(this)}
        type="edit"
        style={{ fontSize: "20px", color: "green" }}
        theme="outlined"
      />
      <Icon
        onClick={this.deleteFun.bind(this)}
        type="delete"
        style={{ fontSize: "20px", color: "#CC160B" }}
        theme="outlined"
      /> : null}
    </Option>
  ));
}

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      optionsdata : [
         {key:'101',value:'Lion'},
         {key:'102',value:'Giraffe'},
         {key:'103',value:'Zebra'},
         {key:'104',value:'Hippo'},
         {key:'105',value:'Penguin'}
       ],
      selectedValue: null // store selected value
    }
  }
  handleChange = (e) => {
    console.log(e.target.value);
    var value = this.state.optionsdata.filter(function(item) {
      return item.key == e.target.value
    })
    this.setState({ selectedValue: value[0].value }); // set state
    console.log(value[0].value);
  }
  render() {
    const { selectedValue } = this.state;
    return (
      <select onChange={this.handleChange}>
        {this.state.optionsdata.map(function(data, key) {  return (
          <option key={key} value={data.key}>{data.value} {selectedValue !== data.value ? '+ -' : null } </option> )
        })}
      </select>
    )
  }
}

ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.0.1/react-dom.min.js"></script>
<div id="app"></div>