Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
BlueChinchillaEatingDorito

React Star Ratings

Recommended Posts

Posted · Original PosterOP

I'm implementing a pop up window on a webpage where a user can leave a review on a web app I'm working on using React. Right now, I have a Modal that opens and the user is presented with a Star Rating component they can select a rating for and a Comment box they can type comments in. The issue I have right now is that while it all renders fine, I can't seem to make the Star Ratings clickable. i.e. If the user clicks on a star, it doesn't actually change the default value of 0 stars. If the user hovers over the stars, they animate fine. But it just doesn't seem to be selectable. Any thoughts? 

 

Star Rating Code in the Modal within render()

<StarRating
	rating={this.state.rating}
	starRatedColor="red"
	changeRating={() => this.changeRating.bind(this)}
	numberOfStars={5}
	name='rating'
/>

Constructor for the page

constructor() {
	super()
	this.state = {
		show: false,
		rating: 0
	}
}

 


AMD Phenom™ II X6 1100T @ 4.0GHz | MSI 890FXA-GD65 | MSI GTX 550Ti | 16GB Kingston DDR3 | Samsung 850 EVO 250GB | WD 750GB | Antec 300 | ASUS Xonar DG | Corsair A50 | OCZ 600W | Windows 10 Pro

Sony MDR-V250 | Logitech G610 Orion Brown | Logitech G402 | Samsung C27JG5 

Intel Core™ i5-8520U | WD Blue M.2 250GB | 1TB Seagate FireCuda | 8GB DDR4 | Windows 10 Home | ASUS Vivobook 15 

Intel Core™ i7-3520M | GT 630M | 16 GB Corsair Vengeance DDR3 | Samsung 850 EVO 250GB | macOS Catalina  Lenovo IdeaPad P580

AMD Phenom™ II X2 550 @ 3.10GHz | Gigabyte GA-MA785GM-US2H | XFX Radeon HD 4870 | 4GB Corsair XMS2 | WD 250GB | Thermaltake TR2 500W | Windows 10 Pro

iPhone 6s (iOS 13.6.1) | iPad Mini (iOS 9.3.5) | Samsung Galaxy S5e

Link to post
Share on other sites

I think you need to change the prop to: 

changeRating={this.changeRating.bind(this, event)}

 

or bind the function in your constructor,

this.changeRating = this.changeRating.bind(this)

 

and then change the prop to

changeRating={() => this.changeRating(event)}

 

 

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Newegg

×