Solution for adding data attributes to a react-select component by passing in "custom components" where you've manipulated the innerProps prop

react-select-data-attributes.jsx

import React, { Component } from 'react';
import ReactSelect, { components } from 'react-select';

const TextOption = props => (
  components.Option && (
    <components.Option { ...props }>
      ...
    </components.Option>
  )
);

const addDataAcceptance = ( Component, dataAcceptance ) => (
  props => (
    <Component
      { ...props }
      innerProps={ Object.assign({}, props.innerProps, { 'data-acceptance': dataAcceptance }) }
    />
  )
);

const CUSTOM_COMPONENTS = {
  Option: addDataAcceptance( TextOption, 'TextOption' ),
  Menu: addDataAcceptance( components.Menu, 'Menu' ),
  ...
};

class Select extends Component {
  render() {
    return (
      <ReactSelect
        components={ CUSTOM_COMPONENTS }
        ...
      />
    );
  }
}

thanks for this, nice and elegant solution. helped me a lot.

Thanks! Made my day!

Worked for most components! Thanks a lot!