semantic ui react dropdown selected item icon

Viewed 1452

I'm trying to create a dropdown/select with semantic ui and React, and I want it to display check-mark on selected item. my current code is :

 groupSelector() {
    let groups = Object.keys(this.state.data).map((val, index) => {
      return {
        text: val,
        value: index,
        image: (
          <span style={{ color: this.state.data[val].Color }}>&#9733;</span>
        )
      };
    });
    return (
      <Dropdown
        placeholder="choose group"
        id="dropdown"
        selection
        fluid
        options={groups}
        onChange={(e, { value }) => {
          this.setGroupToShow(value, e);
        }}
      />
    );
  }

help anyone?

1 Answers

I would try to achieve this with css. Add some custom styles to the item.selected class for this dropdown. In these custom styles you can add a pseudo-element with the check-mark.

Related