I am trying to pass a variable to a prop function in React that is all within a .map function.
I am getting an Invalid Left-Hand Side in arrow function parameters error.
<div style={ style.navContainer }>
{navItems.map((item, i) => <div key={ i } onClick={ (item.name) => this.props.onClickGoTo(name) } style={ style.navItem }>
<img style={ style.icon } src={ item.src } />
{ item.name }</div>)}
</div>
It's a new feature that introduced in ES6 and is called arrow function. The left part denotes the input of a function and the right part the output of that function.
What It Is. This is an arrow function. Arrow functions are a short syntax, introduced by ECMAscript 6, that can be used similarly to the way you would use function expressions. In other words, you can often use them in place of expressions like function (foo) {...} .
Arrow functions don't have their own bindings to this , arguments or super , and should not be used as methods. Arrow functions don't have access to the new.target keyword. Arrow functions aren't suitable for call , apply and bind methods, which generally rely on establishing a scope.
Almost. It should be:
onClick={ () => this.props.onClickGoTo(item.name) }
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