Menu
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'/>
507
There is no way to pass props up to a parent component from a child component. We will revisit this caveat later in this tutorial. It's also important to note that React's props are read only (immutable). As a developer, you should never mutate props but only read them in your components.
The way it works is that you define your data on the parent component and give it a value, then you go to the child component that needs that data and pass the value to a prop attribute so the data becomes a property in the child component. You can use the root component (App.
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" />If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
