Interactive rating component using Reactjs

Community feedback

• 

  Alan Ibarra•440

  @Ibarra11

  Posted almost 3 years ago

  I noticed that you have selectedRating as a variable outside of the component. I think it would be more appropriate to be used as a state value in your App component. Then you can just make a handler in the app component that takes a rating value and updates the rating state variable. Then you can just pass the rating value to RatingCard as a prop and the handler for it as well. This will eliminate the need to keep in isActive state in the rating card component, you can just transfer that logic into the handler. Also, you ratingCard component you have a lot of repetition with the rating values. You can instead just map over an array of ratings.

  define outside of your component
  const ratings = [1,2,3,4,5];
  {ratings.map(rating =>{
    return (<div key={rating} className={props.selectedRating === rating apply the conditional styles} onClick={() => updateRating(rating)}}>
        <span>{rating}
  </div>)
  })}
  

  00