Golang React JS Technology Blog

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;
Most Helpful This Week
How to show hide component on Click in React JS? Integrate Bootstrap with ReactJS Application Using this keyword access component properties and methods React JS onClick event handler React JS get Tag Name and Inner Text on Click Create React App Display JSON Data in React JS React JS update Div content on click How to use onChange and onClick event in React JS? Create Functional Component using ES6 Arrow Syntax