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
Create Functional Component using ES6 Arrow Syntax How to use function inside JSX expression? How to pass an Argument to a Method used inside JSX expression? React Props How to use createElement in React JS? How to render one component in another component in React JS? React JS Count number of checkboxes are checked React JS onClick event handler React JS update Div content on click React JS get Tag Name and Inner Text on Click