The component ReactStars won't let me use setState({})

[seque1990]

We found an issue on the ReactStars component when trying to set a state.

Here is the code to reproduce the problem:

import React from 'react';
import Relay from 'react-relay';
import autobind from 'autobind-decorator';
import ReactStars from 'react-stars';

export default class BookPagePostReview extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      rating: 0,
    };
  }

  @autobind
  onStarClick(value) {
    this.setState({rating: value});
  }

  render() {
    return (
    <div>
      <ReactStars
        count={5}
        size={24}
        onChange={this.onStarClick}
       />
    </div>
    );  
  }
}

Problem: When clicking the stars the new state is set, but the stars won't show the rating I picked (i.e. if I click 3 stars, it will show nothing). That in terms of User Experience is not the optimal result.

The solution we found for this problem is using:

  @autobind
  onStarClick(value) {
    this.state.rating = value;
  }

But that one is not ideal for React.

[olegberman]

Sorry for a long wait,

have you tried something like this?

      <ReactStars
        value={this.state.react_stars_val}
        count={5}
        size={24}
        onChange={this.onStarClick}
       />

I didn't quite understand the problem as on the example page http://developers.n49.com/react-stars/ everything works as expected (3'rd example). The plugin holds internal state and should rerender itself (w/ any involvement from parent components.