---
title: "JavaScript Star Rating Component Example | LemonadeJS v5"
description: "LemonadeJS v5 archive. Learn how to implement a simple reactive five-star rating component using LemonadeJS."
source: https://lemonadejs.com/docs/v5/examples/rating/
---
# JavaScript Five-Star Rating Example
This example demonstrates a basic `five-star rating` component built with LemonadeJS and a loop.
> **Note**: Requires Material Icon\
> \
```html
```
```javascript
import lemonade from 'lemonadejs';
export default function Rating() {
// Current clicked star self
let current = null;
// Five stars
this.stars = [{},{},{},{},{}];
// Click event
this.click = (e, s) => {
// If the self of the clicked item is not selected reset the null
if (! s.selected) {
current = null;
}
// Get the position of the self of the clicked item
let index = this.stars.indexOf(s);
// Create new array to trigger reactivity
this.stars = this.stars.map((star, i) => {
return { selected: (i <= index && s !== current) };
});
// Keep the self of the last item clicked
current = s;
}
return render => render`
`;
}
```
## CSS for This Section
You need to include the following CSS.
```css
.stars > i::after {
font-family: 'material icons',serif;
font-size: 24px;
content: 'star_outline';
cursor: pointer;
}
.stars > i[data-selected='true']::after {
content: 'star';
color: red;
}
```
## More resources
- [JS Rating Component](/docs/v5/plugins/rating/)