diff --git a/snippets/StarRating.md b/snippets/StarRating.md
index 573467fb5..43d9afa47 100644
--- a/snippets/StarRating.md
+++ b/snippets/StarRating.md
@@ -3,7 +3,7 @@
 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.setState()` 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 `props.rating` (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.
 * Finally, pass the appropriate values to each `<Star>` component (`starId` and `marked`).
@@ -29,7 +29,7 @@ function StarRating(props) {
   return (
     <div
       onMouseOut={() => hoverOver(null)}
-      onClick={() => setRating(event.target.getAttribute('star-id') || this.state.rating)}
+      onClick={(event) => setRating(event.target.getAttribute('star-id') || this.state.rating)}
       onMouseOver={hoverOver}
     >
       {Array.from({ length: 5 }, (v, i) => (