Basically I have 3 custom attributes data-pageName, data-defaultOption, data-options.

The problem I have is that when I pass into my child component I get an unexpected token error because its something like this:

const pageContent = ({data-pageName, name, onChange, data-defaultOption, value, data-options}) => {

/*return here*/

};

Basically the - symbol is causing the error.

How do I include it as data-pageName and not read as data - pageName?

This is how I call the component:

<pageContent data-pageName={this.state.pageClicked} onChange={this.closeMenu} data-defaultOption={this.state.tmpDefaultOption} value={this.state.tmpValue} data-error={this.state.tmpError} data-options='a'/>