CODEWITHSUNDEEP
javascriptreactjsecmascript-6custom-data-attribute
Joshua Rajandiran
Joshua Rajandiran

Reputation: 2928

How to properly pass custom data attribute props to child components?

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'/>

Upvotes: 11

Views: 28411

Answers (3)

adl
adl

Reputation: 2035

When you destruct your child component props, you can assign its dashed variables to variables with new names.

const PageContent = ({ 'data-options': dataOptions }) => (
    <div>...</div>
);

PageContent.propTypes = {
    'data-options': PropTypes.string
};

Upvotes: 8

Jei Trooper
Jei Trooper

Reputation: 437

When using dashes, you must wrap it inside single quotes.

render() { 
  const myProps = {
    'data-pageName': this.state.pageClicked,
    'data-defaultOption': this.state.tmpDefaultOption,
  };

  return <MyComponent {...myProps} />
}

You can then use this.props['data-pageName'] inside your child component.

Upvotes: 3

Serhii Baraniuk
Serhii Baraniuk

Reputation: 3375

Dashes are not allowed in variable names. So, you have to use quotes '' 

const Example = (props) =>
  <div>{props['data-name']}</div>

ReactDOM.render(
  <Example data-name="hello"/>,
  document.getElementById('app')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app" />

Upvotes: 12

Related Questions