onHover and onChanged not working propertly

[rodriturnes]

Hey,

I am trying to update a label next to the ratings that show some text depending on the star selected (or the one you're hovering over).

The problem is that when I use both functions, the onChange method does not get triggered.

handleClickRating(value) {
this.setState({ newValue: value });
}

handleHoverRating(value) {
if (value) {
this.setState({ newValue: value });
}
}

Is there any error on my side? I tried also to have two states (one for the clicked value and one for the hovered one) but click event didn't fire anyway.

Thanks!

[dreyescat]

Hello @rodriturnes,

I am not sure what is the issue you are having... but... let me show you a small example using both onChange and onHover at the same time. Maybe it could help you out to find out where is the problem.

This is a component that shows below the rating element two labels. One with the current selected rating and the other one with the rating you are hovering.

class ControlledRating extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: props.initialRating,
      hoverValue: undefined
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleHover = this.handleHover.bind(this);
  }

  handleChange(value) {
    this.setState({
      value
    });
  }
  
  handleHover(hoverValue) {
    this.setState({
      hoverValue
    });
  }

  render() {
    return (
      <div>
        <Rating {...this.props}
          onChange={this.handleChange}
          onHover={this.handleHover}
          initialRating={this.state.value} />
        <div>Current value: {this.state.value}</div>
        <div>Hovered value: {this.state.hoverValue}</div>
      </div>
    );
  }
}

You can see it running in this CodePen