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

Ran linter

Browse Source
This commit is contained in:
Angelos Chalaris
2019-03-02 10:10:14 +02:00
parent ddd852962d
commit 3868acab34
32 changed files with 583 additions and 708 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
snippets/StarRating.md
View File

@ -5,35 +5,31 @@ 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`.
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 }) {
return (
<span star-id={starId} style={{ color: "#ff9933" }} role="button">
{marked ? "\u2605" : "\u2606"}
<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 [rating, setRating] = React.useState(typeof props.rating == 'number' ? props.rating : 0);
const [selection, setSelection] = React.useState(0);
const hoverOver = event => {
let val = 0;
if (event && event.target && event.target.getAttribute("star-id"))
val = event.target.getAttribute("star-id");
if (event && event.target && event.target.getAttribute('star-id'))
val = event.target.getAttribute('star-id');
setSelection(val);
};
return (
<div
onMouseOut={() => hoverOver(null)}
onClick={() =>
setRating(event.target.getAttribute("star-id") || this.state.rating)
}
onClick={() => setRating(event.target.getAttribute('star-id') || this.state.rating)}
onMouseOver={hoverOver}
>
{Array.from({ length: 5 }, (v, i) => (
@ -49,7 +45,7 @@ function StarRating(props) {
```
```jsx
ReactDOM.render(<StarRating/>, document.getElementById('root'));
ReactDOM.render(<StarRating />, document.getElementById('root'));
ReactDOM.render(<StarRating rating={2} />, document.getElementById('root'));
```