starRating with react js

JavaScript
1

Hello everyone,

The below code is for star rating and the onClick seems not to be functioning, I expect the star to be coloured whenever I click on it, but it is not. kindly help

import React, { useState } from 'react'

export default function Star() {
const [rating, setRating] = useState(0)
const [hover, setHover] = useState(0)

  return (
    <div>
      {[...Array(5)].map((star, index) => {
        index += 1
     
        return (
          <button type='button'
          key={index}
          className={index <= (hover || rating) ? 'text-red-500' : 'text-blue-600'}   
           onclick= {() => setRating(index) }  
           onMouseEnter={() => setHover(index)}
           onMouseLeave={()=> setHover(rating)}   >
            
            <span>&#9733;</span> 
          </button>
         
        )
      })}
    </div>
  )
}
2
  • why do you have two “return” here?
  • also “before trying on hover effect” try with simple “click” event first, and then move on to “hover”,

happy learning :slight_smile:

1 Like
3

Thanks for your feedback

4

The index++ is showing error without the second return, that’s why i used it

5

The event name is onClick not onclick

I assume the code is from this

1 Like
6

Yeah… you’re right, it has been solved already

7

That’s good.

Please updated your thread when you solve an issue though.

1 Like
8

Okay, thats fine. Thank you

9

Thank you lasjorg. I do appreciate