Welcome to the Treehouse Community
The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.
Iain Simmons
Treehouse Moderator 32,253 PointsPass second argument to map method instead of using bind
When updating the map method in the Application component, you say that we have to use the bind method on the anonymous function, but I believe you can actually just pass this as a second argument to the map function to tell it what should be used as this within it.
e.g.
{this.state.players.map(function(player, index) {
return (
<Player
key={player.id}
name={player.name}
score={player.score}
onScoreChange={function(delta) {
return this.onScoreChange(index, delta);
}}
/>
);
}, this)}
2 Answers
Seth Kroger
56,405 PointsGiven that you're using an ES6 arrow function to avoid the other bind() for onScoreChange, you can just use an arrow function for map as well. (Tried it out on my old workspace for the course and it works).
{ this.state.players.map((player, index) => {
return (
<Player
onScoreChange={delta => this.onScoreChange(index ,delta)}
name={player.name}
score={player.score}
key={player.id} />
);
}) }
Iain Simmons
Treehouse Moderator 32,253 PointsYeah I was using ES2015/ES6 for my local project files, but meant to share the ES5 code in the forums here because that's what @jim was using. I've updated my original question to reflect that.
Also, you could omit the curly braces, return and parentheses around your <Player /> component if you really want to make things compact with arrow functions. :)
{this.state.players.map((player, index) =>
<Player
onScoreChange={delta => this.onScoreChange(index ,delta)}
name={player.name}
score={player.score}
key={player.id} />
)}
Sean T. Unwin
28,660 Pointsbind() and passing an argument representing what this should be, inside the called function, as a callback are essentially the same thing. However, bind() is safer and more explicit.
See this StackOverflow answer for more information.
Iain Simmons
Treehouse Moderator 32,253 Pointsbind creates a new function, so I wouldn't say they are the same. And if you are creating new functions with bind within a component's render method, you're creating them every time the component re-renders (i.e. on every state change, etc).
In any case, I much prefer the ES2015/ES6 use of arrow functions for this sort of thing.
Iain Simmons
Treehouse Moderator 32,253 PointsIain Simmons
Treehouse Moderator 32,253 PointsJim Hoskins