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:
Angelos Chalaris
2018-10-18 19:40:37 +03:00
committed by GitHub
parent df60f0c4b4
commit b26d99300f
1 changed files with 15 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
snippets/StarRating.md
View File

@ -5,11 +5,23 @@ Renders a star rating component.
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.
In the `render()` method, 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.
Render 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`.
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`).
```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);
@ -28,23 +40,12 @@ class StarRating extends React.Component {
this.setState(state => ({ rating: val }));
}
render() {
function Star({ marked, starId, onHover }) {
return (
<span
star-id={starId}
style={{ color: '#ff9933' }}
onMouseEnter={() => onHover(starId)}
>
{marked ? '\u2605' : '\u2606'}
</span>
);
}
return (
<div onMouseOut={() => this.hoverOver(0)} onClick={this.setRating}>
{Array.from({ length: 5 }, (v, i) => i + 1).map(v => (
<Star
starId={v}
key={`star_${v}`}
key={`star_${ v } `}
marked={
this.state.selection
? this.state.selection >= v