andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update StarRating.md

Browse Source
This commit is contained in:
Álvaro
2019-03-22 10:20:36 +01:00
committed by GitHub
parent 3f65841cdd
commit f4e5869b74
1 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
snippets/StarRating.md
View File

@ -3,7 +3,7 @@
Renders a star rating component. 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. * 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 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`). * Finally, pass the appropriate values to each `<Star>` component (`starId` and `marked`).
@ -29,7 +29,7 @@ function StarRating(props) {
return ( return (
<div <div
onMouseOut={() => hoverOver(null)} 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} onMouseOver={hoverOver}
> >
{Array.from({ length: 5 }, (v, i) => ( {Array.from({ length: 5 }, (v, i) => (