ReactJs Rating Stars Component / Example / Demo / Sourcecode Download

const Rating = React.createClass({ displayName: "Rating", getInitialState: function () { const stars = this.props.stars;   return { value: stars, dynamicValue: stars };   },   handleClick: function (newValue) { this.setState({ value: newValue, dynamicValue: newValue });     if (this.props.onRated) { this.props.onRated(newValue); } },   handleMouseEnter: function (newValue) { this.setState({ dynamicValue: newValue }); },   handleMouseLeave: function (newValue) { this.setState({ dynamicValue: this.state.value }); },   render: function () { const starSpans = [];   for (let v = 1; v <= 5; v++) {if (window.CP.shouldStopExecution(0)) break; if (v <= this.state.dynamicValue) { starSpans.push( /*#__PURE__*/ React.createElement("span", { key: v, className: "star", onMouseEnter: this.handleMouseEnter.bind(this, v), onMouseLeave: this.handleMouseLeave.bind(this, v), onClick: this.handleClick.bind(this, v) }, "\u2605"));         } else { starSpans.push( /*#__PURE__*/ React.createElement("span", { key: v, className: "star", onMouseEnter: this.handleMouseEnter.bind(this, v), onMouseLeave: this.handleMouseLeave.bind(this, v), onClick: this.handleClick.bind(this, v) }, "\u2606"));         } }window.CP.exitedLoop(0);   return /*#__PURE__*/React.createElement("div", null, starSpans); } });     function handleRated(newRating) { console.log(`The new rating is: ${newRating}`); }   ReactDOM.render( /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement(Rating, { stars: 1, onRated: handleRated }), /*#__PURE__*/ React.createElement(Rating, { stars: 2 }), /*#__PURE__*/ React.createElement(Rating, { stars: 3 }), /*#__PURE__*/ React.createElement(Rating, { stars: 4 }), /*#__PURE__*/ React.createElement(Rating, { stars: 5 })),   document.getElementById('container'));