onHover is broken when passing custom react element symbols

[darkowic]

Here is example for reproduce:
https://codesandbox.io/s/oj7mzzww36

I debug it... Problem is that RatingAPILayer PureComponent shouldComponentUpdate does not handle checking for react element. So, on every onHover execution, RatingAPILayer will be rerendered which cause multiple rerendering. Another problem is in Rating component componentWillReceiveProps:

  componentWillReceiveProps(nextProps) {
    this.setState({
      dirty: this.props.value !== nextProps.value && !this.state.dirty
        ? true
        : this.state.dirty,
      displayValue: nextProps.value
    });
  }

I do not understand why on every props update displayValue is set to nextProps.value. But if shouldComponentUpdate is handled properly in RatingAPILayer this is not a problem.

[darkowic]

I'm going to fix it for you :)

[darkowic]

Fixed in #73. The examples index.html is so difficult to edit or adjust :) Would be great if we rewrite it to React

[bslinger]

I was about to make this same pull request, thanks @darkowic !

[dreyescat]

The examples index.html is so difficult to edit or adjust :) Would be great if we rewrite it to React

@darkowic Oh yes!! It would be great. I have been lazy to change the index page for a loooong time. In the beginning it was created without jsx. Then I just added the browser version of Babel just to make it easier. Even included prism to show the code that generated those ratings. But, I completely agree with you, that it is really painful to modify and add elements. Any proposal? Long time ago I read something about StoryBook but I don't know if it will fit.