ReactJS assign click handler in for loop

Question

Hi so I have this fiddle here http://jsfiddle.net/cmrunhow/5/ and it is working fine. However I was wondering why can't I replace

var clickHandler = this.props.onRatingSelected && this.props.onRatingSelected.bind(null, i);
items.push(<li key={i} className={i <= this.props.value && 'filled'} onClick={clickHandler}>{'\u2605'}</li>);

with

items.push(<li key={i} className={i <= this.props.value && 'filled'} onClick={this.props.onRatingSelected.bind(null, i)}>{'\u2605'}</li>);

assuming I skip the sanity check.

Rajesh Dixit · Accepted Answer · 2016-11-29 07:26:41Z

3

in your fiddle FundooRating component is called with and without onRatingSelected props.

 <div>
  Rating is {this.state.rating} <br/>
  Clickable Rating <br/>
  <FundooRating value={this.state.rating} max="10" onRatingSelected={this.handleRatingSelected.bind(this)} />
  <br />
  Readonly rating <br/>
  <FundooRating value={this.state.rating} max="10" />
</div>

so you will have to check for null case in replaced code too

items.push(<li key={i} className={i <= this.props.value && 'filled'} onClick={this.props.onRatingSelected && this.props.onRatingSelected.bind(null, i)}>{'\u2605'}</li>);

Sample Fiddle

edited Nov 29, 2016 at 7:26

Rajesh Dixit

25k5 gold badges52 silver badges86 bronze badges

answered Nov 29, 2016 at 7:25

duwalanise

1,3021 gold badge14 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Rajesh Dixit Over a year ago

Just a pointer, instead of .bind(null, i) do .bind(this, i)

user2796124 Over a year ago

Ahhh yes, I was too obsessed with the first row of stars I totally neglected the second row. A quick follow up question tho, using the same fiddle with some changes here jsfiddle.net/cmrunhow/7 , I realized React with ES6 no longer autobinds method and one of the alternative is to use fat arrow function. Could you take a look and tell me where have I gone wrong?

Mark Williams Over a year ago

I believe fat arrow functions are not supported in ES6 classes.

duwalanise Over a year ago

To my knowledge it should have worked. There is another way of using fat arrow. jsfiddle.net/y944zuoc/1

Mark Williams · Accepted Answer · 2016-11-29 07:24:21Z

0

You need the check for

this.props.onRatingSelected

because you have an instance of FundooRating your where you don't pass a handler as a prop:

 <FundooRating value={this.state.rating} max="10" />

(just below the Readonly text).

answered Nov 29, 2016 at 7:24

Mark Williams

2,3081 gold badge14 silver badges15 bronze badges

Collectives™ on Stack Overflow

ReactJS assign click handler in for loop

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related