Star rating
React, Components, Children, Input, State · Oct 13, 2021

Renders a star rating component.
- Define a
Star
component. It renders each individual star with the appropriate appearance, based on the parent component's state. - Define a
StarRating
component. Use theuseState()
hook to define therating
andselection
state variables with the appropriate initial values. - Create a method,
hoverOver
, that updatesselected
according to the providedevent
, using the .data-star-id
attribute of the event's target or resets it to0
if called with anull
argument. - Use
Array.from()
to create an array of5
elements andArray.prototype.map()
to create individual<Star>
components. - Handle the
onMouseOver
andonMouseLeave
events of the wrapping element usinghoverOver
. Handle theonClick
event usingsetRating
.
.star { color: #ff9933; cursor: pointer; }
const Star = ({ marked, starId }) => { return ( <span data-star-id={starId} className="star" role="button"> {marked ? '\u2605' : '\u2606'} </span> ); }; const StarRating = ({ value }) => { const [rating, setRating] = React.useState(parseInt(value) || 0); const [selection, setSelection] = React.useState(0); const hoverOver = event => { let val = 0; if (event && event.target && event.target.getAttribute('data-star-id')) val = event.target.getAttribute('data-star-id'); setSelection(val); }; return ( <div onMouseOut={() => hoverOver(null)} onClick={e => setRating(e.target.getAttribute('data-star-id') || rating)} onMouseOver={hoverOver} > {Array.from({ length: 5 }, (v, i) => ( <Star starId={i + 1} key={`star_${i + 1}`} marked={selection ? selection >= i + 1 : rating >= i + 1} /> ))} </div> ); }; ReactDOM.createRoot(document.getElementById('root')).render( <StarRating value={2} /> );