how to create dropdown in react with icon

Question

Hi i want to create a dropDown in react with each item having an icon. As i tried react-select but its not showing the icon ,and also the selected value .When i remove value prop from react-select component than the label is showing. I want to create the dropdown like the this.

//USerInfo.js

import React from "react";
import { connect } from "react-redux";
import FontAwesome from "react-fontawesome";
import Select from "react-select";

import { setPresence } from "../../ducks/user";

import "./UserInfo.css";

class UserInfo extends React.Component {
  //   constructor(props) {
  //     super(props);
  //     this.state = {
  //       currentPresence: "available",
  //     };
  //   }

  presenceOpts = [
    { value: "available", label: "Available" },
    { value: "dnd", label: "Busy" },
    { value: "away", label: "Away" },
  ];

  setPresenceFun(presence) {
    this.props.setPresence(presence);
  }

  renderPresenceOption(option) {
    return (
      <div className="presenceOption">
        <FontAwesome name="circle" className={"presenceIcon " + option.value} />
        {option.label}
      </div>
    );
  }

  renderPresenceValue(presence) {
    return (
      <div className="currentPresence">
        <FontAwesome
          name="circle"
          className={"presenceIcon " + presence.value}
        />
      </div>
    );
  }

  render() {
    return (
      <div className="UserInfo">
        {this.props.client.authenticated && (
          <div className="authenticated">
            <div className="user">
              <div className="presenceControl">
                <Select
                  name="presence"
                  value={this.props.user.presence.value}
                  options={this.presenceOpts}
                  onChange={this.setPresenceFun.bind(this)}
                  clearable={false}
                  optionRenderer={this.renderPresenceOption}
                  valueRenderer={this.renderPresenceValue}
                />
              </div>

              <div className="username">
                <p>{this.props.client.jid.local}</p>
              </div>
            </div>
          </div>
        )}
      </div>
    );
  }
}

const mapStateToProps = (state, props) => ({
  client: state.client,
  user: state.user,
});

const mapDispatchToProps = (dispatch, props) => {
  return {
    setPresence: (presence) => dispatch(setPresence(presence)),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(UserInfo);

Answer 1

You can customize the option for dropdown

This may assist you in resolving the custom styling issue with react select.

https://codesandbox.io/s/react-select-add-custom-option-forked-u1iee?file=/src/index.js