Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Arrow function passing a variable within a prop within a .map

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>
like image 432
Sequential Avatar asked Feb 17 '17 00:02

Sequential


People also ask

What does () => mean in JavaScript?

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 does => mean in programming?

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) {...} .

Do arrow functions have their own binding to the this keyword?

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.


1 Answers

Almost. It should be:

onClick={ () => this.props.onClickGoTo(item.name) }
like image 124
Jeff McCloud Avatar answered Nov 24 '22 18:11

Jeff McCloud