react

Just a Web Code Solution

Step 1. Your question relates to:

Step 2. Type a keyword:

create half star rating in react

1079

Show ResultREACT

/* based on https://codesandbox.io/s/xpl2wjpyoq */
<html lang = "en">

<head>
<meta charset = "UTF-8">
<title>React App</title>
<script src="https://fb.me/react-0.14.3.min.js"></script>
<script src="https://fb.me/react-dom-0.14.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<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>

<script type="text/babel">

class Rating extends React.Component {
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>
);
}
}

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

ReactDOM.render(
<div style={styles}>
<Rating rating={5} />
</div>,
document.getElementById('root')
);

</script>

<div id="root"></div>

</body>

</html>