react | create half star rating react

react

See All Activity

Just a Web Code Solution

Step 1. Your question relates to:

Step 2. Type a keyword:

create half star rating in react

291

REACT

/* based on https://codesandbox.io/s/xpl2wjpyoq */

// index.html
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>React App</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>

<body>
<div id="root"></div>
<script src = "index.js"></script>
</body>
</html>

// Rating.js
import React from "react";

class Rating extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
rating: this.props.rating || null,
temp_rating: null
};
}

handleMouseover(rating) {
this.setState(prev => ({
rating,
temp_rating: prev.rating
}));
}

handleMouseout() {
this.setState(prev => ({
rating: prev.temp_rating
}));
}

rate(rating) {
this.setState({
rating,
temp_rating: rating
});
}

render() {
const { rating } = this.state;
let stars = [];
for (let i = 0; i < 10; i++) {
console.log("i", i);
let klass = "ion-ios-star-outline";
if (this.state.rating >= i && this.state.rating !== null) {
klass = "ion-ios-star";
}
stars.push(
<i
style={{ display: "inline-block", width: "7px", overflow: "hidden", direction: (i%2===0) ?
"ltr" : "rtl"}}
className={klass}
onMouseOver={() => this.handleMouseover(i)}
onClick={() => this.rate(i)}
onMouseOut={() => this.handleMouseout()}
/>
);
}
return (
<div className="rating">
{stars}
</div>
);
}
}

export default Rating;

// index.js
import React from "react";
import { render } from "react-dom";
import Rating from "./Rating";

const styles = {
fontFamily: "sans-serif",
textAlign: "center"
};

const App = () =>
<div style={styles}>
<Rating rating={5} />
</div>;

render(<App />, document.getElementById("root"));