Add an icon before the input element in react-select

Question

I am trying to add an icon in front of the input element of react select. I am able to get the icon in placeholder but the problem with a placeholder is that when I select s

Answer 1

Based on what you've already done I would do a combination of custom style + custom component.

export default class InfluencersForm extends Component {
  constructor() {
    super();
    this.handleInfluencerName = this.handleInfluencerName.bind(this);
  }
  handleInfluencerName(event) {
    console.log(event);
  }
  render() {
    const influencers = [
      { value: "abc", label: "abc" },
      { value: "def", label: "def" }
    ];

    const ValueContainer = ({ children, ...props }) => {
      return (
        components.ValueContainer && (
          <components.ValueContainer {...props}>
            {!!children && (
              <i
                className="fa fa-search"
                aria-hidden="true"
                style={{ position: 'absolute', left: 6 }}
              />
            )}
            {children}
          </components.ValueContainer>
        )
      );
    };

    const DropdownIndicator = props => {
      return (
        components.DropdownIndicator && (
          <components.DropdownIndicator {...props}>
            <i
              className="fa fa-search"
              aria-hidden="true"
            />
          </components.DropdownIndicator>
        )
      );
    };

    const styles = {
      valueContainer: base => ({
        ...base,
        paddingLeft: 24
      })
    }

    return (
      <div>
        <div>
          <Select
            options={influencers}
            isMulti={false}
            onChange={this.handleInfluencerName}
            isSearchable={true}
            components={{ DropdownIndicator, ValueContainer }}
            classNamePrefix="vyrill"
            styles={styles}
          />
        </div>
      </div>
    );
  }
}

In my custom style I have added an arbitrary paddingLeft of 24 to make some space and add the desired icon. You might have to change it depending of the icon you want to use.

Then in ValueContainer next to the children I have put the fontAwesome icon.

Here a live example of my solution.