Update StarRating.md

snippets/StarRating.md

@@ -2,62 +2,67 @@
 
 Renders a star rating component.
 
+Use and IIFE to define a functional component, called `Star` that will render each individual star with the appropriate appearance, based on the parent component's `state` and return the class component `StarRating`.
 Use the value of the `rating` prop to determine if a valid rating is supplied and store it in `state.rating` (or `0` if invalid or not supplied).
 Initialize `state.selection` to `0`.
-Create two methods, `hoverOver` and `setRating`, that take a number as argument and update `state.selected` and `state.rating` according to it, bind them both to the component's context.
-Define a functional component, called `Star` that will render each individual star with the appropriate appearance, based on the parent component's `state`, and handle its `onMouseEnter` event, using the parent component's `hoverOver` method.
-In the `render()` method, create a `<div>` to wrap the `<Star>` components, which are created using `Array.prototype.map` on an array of 5 elements, created using `Array.from`, and handle the `onMouseLeave` event to set `state.selection` to `0` and the `onClick` event to set the `state.rendering` to the `star-id` attribute of the `event.target`. 
-Finally, pass the appropriate values to each `<Star>` component (`starId`, `marked` and `onHover`).
+Create two methods, `hoverOver` and `setRating`, that take an event as argument and update `state.selected` and `state.rating` according to it, bind them both to the component's context.
+In the `render()` method, create a `<div>` to wrap the `<Star>` components, which are created using `Array.prototype.map` on an array of 5 elements, created using `Array.from`, and handle the `onMouseLeave` event to set `state.selection` to `0`, the `onClick` event to set
+the `state.rating` and the `onMouseOver` event to set `state.selection` to the `star-id` attribute of the `event.target` respectively. 
+Finally, pass the appropriate values to each `<Star>` component (`starId` and `marked`).
 
 ```jsx
-function Star({ marked, starId, onHover }) {
-  return (
-    <span
-      star-id={starId}
-      style={{ color: '#ff9933' }}
-      onMouseEnter={() => onHover(starId)}
-    >
-      {marked ? '\u2605' : '\u2606'}
-    </span>
-  );
-}
-
-class StarRating extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      rating: typeof props.rating == 'number' ? props.rating : 0,
-      selection: 0
-    };
-    this.hoverOver = this.hoverOver.bind(this);
-    this.handleClick = this.handleClick.bind(this);
-  }
-  hoverOver(val) {
-    this.setState(state => ({ selection: val }));
-  }
-  handleClick(event) {
-    const val = event.target.getAttribute('star-id') || this.state.rating;
-    this.setState(state => ({ rating: val }));
-  }
-  render() {
+const StarRating = (function() {
+  function Star({ marked, starId }) {
     return (
-      <div onMouseOut={() => this.hoverOver(0)} onClick={this.handleClick}>
-        {Array.from({ length: 5 }, (v, i) => i + 1).map(v => (
-          <Star
-            starId={v}
-            key={`star_${ v } `}
-            marked={
-              this.state.selection
-                ? this.state.selection >= v
-                : this.state.rating >= v
-            }
-            onHover={this.hoverOver}
-          />
-        ))}
-      </div>
+      <span star-id={starId} style={{ color: '#ff9933' }} role='button'>
+        {marked ? '\u2605' : '\u2606'}
+      </span>
     );
   }
-}
+
+  return class StarRating extends React.Component {
+    constructor(props) {
+      super(props);
+      this.state = {
+        rating: typeof props.rating == 'number' ? props.rating : 0,
+        selection: 0
+      };
+      this.hoverOver = this.hoverOver.bind(this);
+      this.handleClick = this.handleClick.bind(this);
+    }
+    hoverOver(event) {
+      let val = 0;
+      if (event && event.target && event.target.getAttribute('star-id'))
+        val = event.target.getAttribute('star-id');
+      this.setState(state => ({ selection: val }));
+    }
+    handleClick(event) {
+      const val = event.target.getAttribute('star-id') || this.state.rating;
+      this.setState(state => ({ rating: val }));
+    }
+    render() {
+      return (
+        <div
+          onMouseOut={() => this.hoverOver(null)}
+          onClick={this.handleClick}
+          onMouseOver={this.hoverOver}
+        >
+          {Array.from({ length: 5 }, (v, i) => i + 1).map(v => (
+            <Star
+              starId={v}
+              key={`star_${v} `}
+              marked={
+                this.state.selection
+                  ? this.state.selection >= v
+                  : this.state.rating >= v
+              }
+            />
+          ))}
+        </div>
+      );
+    }
+  };
+})();
 ```
 
 ```jsx