Access data-* attribute in HTML and pass it as props

Question

How do I access the data-* attribute which is specified in HTML to be passed as props ?

If it is a normal attribute then we use this.getAttribute('class') , in case of using data-class webpack adds space data - class . How can we avoid webpack from adding space between hyphen.

UPDATE : May be I need to be more specific, WebPack adds space while generating the code which contains the React Component props.

The generated code looks like,

_createClass(App, [{
            key: 'render',
            value: function render() {
                debugger;
                return _react2.default.createElement(
                    'div',
                    null,
                    _react2.default.createElement(_header2.default, { options: this.props.options }),
                    _react2.default.createElement(_footer2.default, { options: this.props.data - footeroptions })
                );
            }
        }]);

Answer 1

I think you just need to use string literals when referring to object properties with hyphens.

this.props.data-footeroptions
// should be written as
this.props.data['footeroptions']

Also for reference, I think this is probably a JSX problem, rather than WebPack.