Glyphicon Rating Star component
Example
index.html
Add below to my-app\public\index.html in your project's public folder to get the latest styles and Glyphicon.
<link rel="stylesheet" href="https://getbootstrap.com/docs/3.3/dist/css/bootstrap.min.css">
Create a new file in the src folder and call it Star.js
my-app\src\Star.js
import React, { Component } from 'react';
import { Glyphicon } from 'react-bootstrap';
class Star extends Component {
constructor(props){
super(props);
this.state = {star: this.props.star};
}
handleClick(starValue){
this.setState({star:starValue});
}
render() {
return (
<div>
<div>Stars: {this.state.star}</div>
<Glyphicon
glyph={this.state.star >= 1 ? "star" : "star-empty" } id="container"
onClick={this.handleClick.bind(this,1)}
/>
<Glyphicon
glyph={this.state.star >= 2 ? "star" : "star-empty" }
onClick={this.handleClick.bind(this,2)}
/>
<Glyphicon
glyph={this.state.star >= 3 ? "star" : "star-empty" }
onClick={this.handleClick.bind(this,3)}
/>
<Glyphicon
glyph={this.state.star >= 4 ? "star" : "star-empty" }
onClick={this.handleClick.bind(this,4)}
/>
<Glyphicon
glyph={this.state.star >= 5 ? "star" : "star-empty" }
onClick={this.handleClick.bind(this,5)}
/>
{this.props.numOfReviews}
</div>
);
}
}
export default Star;import { Glyphicon } from 'react-bootstrap'; imports the Glyphicon library from "react-bootstrap" which we use to extend. props is passed to the base constructor with super(props) and this.state is a single object that can contain one or more attributes. export default Star makes this component available for other files in our application to import it.
my-app\src\App.js
import React, { Component } from 'react';
import Star from './Star';
class App extends Component {
render() {
return (
<div>
<Star star="1"/>
</div>
);
}
}
export default App;