Update StarRating

snippets/StarRating.md

@@ -6,22 +6,22 @@ tags: components,children,input,state,intermediate
 Renders a star rating component.
 
 - Define a component, called `Star` that will render each individual star with the appropriate appearance, based on the parent component's state.
-- In the `StarRating` component, use the `React.useState()` hook to define the `rating` and `selection` state variables with the initial values of `props.rating` (or `0` if invalid or not supplied) and `0`.
+- In the `StarRating` component, use the `React.useState()` hook to define the `rating` and `selection` state variables with the initial values of `value` (or `0` if invalid or not supplied) and `0`.
 - Create a method, `hoverOver`, that updates `selected` and `rating` according to the provided `event`.
-- 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 `selection` to `0`, the `onClick` event to set the `rating` and the `onMouseOver` event to set `selection` to the `star-id` attribute of the `event.target` respectively.
+- 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 `selection` to `0`, the `onClick` event to set the `rating` and the `onMouseOver` event to set `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 }) {
+const Star = ({ marked, starId }) => {
   return (
     <span star-id={starId} style={{ color: '#ff9933' }} role="button">
       {marked ? '\u2605' : '\u2606'}
     </span>
   );
-}
+};
 
-function StarRating(props) {
-  const [rating, setRating] = React.useState(typeof props.rating == 'number' ? props.rating : 0);
+const StarRating = ({ value }) => {
+  const [rating, setRating] = React.useState(typeof value == 'number' ? value : 0);
   const [selection, setSelection] = React.useState(0);
   const hoverOver = event => {
     let val = 0;
@@ -44,10 +44,10 @@ function StarRating(props) {
       ))}
     </div>
   );
-}
+};
 ```
 
 ```jsx
 ReactDOM.render(<StarRating />, document.getElementById('root'));
-ReactDOM.render(<StarRating rating={2} />, document.getElementById('root'));
+ReactDOM.render(<StarRating value={2} />, document.getElementById('root'));
 ```