How to Make a Star Rating Component in React
HTML-код
- Опубликовано: 13 июн 2024
- Here's how I create a star rating component in React. You'll use this in an application where you'd like to give users the ability to rate something on a scale from 1-5, or whatever scale you'd like.
Twitter: / ericnmurphy
Website: ericmurphy.xyz/ 
Наука
Thanks a lot man! What a bliss to watch a video with clear, easy to follow instructions, non of that overcomplicated stuff. Really appreciate this content. Thanks again!
Dude thanks a lot!
Your speech is very clear and your explanation is really good!
This channel will definitely explode if you continue the videos!
this kind of video feels so much more organic than typical coding tutorials,
Thank you~
Thanks! I enjoy watching these kinds of tutorials more than the more polished tutorials as well.
Thanks Eric! you have a good teaching talent, i hope you have most of the react widgets in ur channel
Best Video I have seen. Keep making such videos. It's really helpful.
Thanks bro it was really helpful!!
I watched a lot of videos out there but this was really easy to understand.
Thanks a lot for this!
I'm hoping to see similar content in the future. You're doing an awesome job! :)
Cheers!
great video - thank you! I was having a 'Warning: Each child in a list should have a unique "key" prop." I added key={i} to the label tag and that solved that issue. I share this in case someone else encounters that problem.
This made my work so much easier! Thank you for this!
Hello, Hugo Sanchez.Where are you from?
Fantastic video man. Keep it up!
Great tutorial. Simple and works. Thanks!
THE BEST tutorial. Thank you! Just subscribed
You are the biggest life saver of them all earned a sub an a new viewer for sure keep it up
amazing and I loved the way u explained everything! big thank u!
Nice video mate, very clean and understandable code!
Neat and direct to the point, Thanks for sharing.
This is so great. Thanks for teaching!
Thank you, bro, that was usefully and very clear explanation, thanks.
thanks bro, simple and beautiful!!
Thank you sir! short and precise
Bruh this was awesome. Worked like a charm. :)
Thanks man ! Nice video, very helpful
Big Help. Easy to follow and understand
Thank man ! every thing is so much clear.
thank you man your explanation is good so i've subscribed please upload more of react videos.. thank you
Super helpful! Keep going bro ⚛⚛
So perfect ..Thanks a lot for this one~!
Thank you man, This help me a lot
This video is so great. If you came to Vancouver, I must buy you a drink!
Thanks a lot man!!!! I loved this video... that is crazy!!
Thank you so much for this video!
thank you boss ... really your explanation is good
Amazing video!
Nice work. I like your clean style
Do you have a suggestion on how to create a rating ratio?
@@Vladeasa Thanks! What do you mean by rating ratio?
@@EricMurphyxyz wow. this was a quick reply, thanks. so if multiple users rate, it will create the average star rating based on their rating
@@Vladeasa Good idea, will probably cover that in a future video!
Excelente!! Justo lo que necesitaba!! Gracias!!
BROOOOOOOOOOOOO YOU ARE THE MAN!!!!!!!!!!!!!!!!!!!!! thank you so much
Very good job.
Thank you.
Thanks for the great content ,your doing a great job keep going ....👍🏻
how would you make it as half star rating..?
Thanks a lot Bro! You should have more 1m subscribers
Very nice tutorial :)
Thanku bro thanku so much ❤ respect from my heart
Thanks, really helped a lot👍
Great tutorial! Do you have a React Native version for this?
Dude thanks a lot!
But how can i store the rating? like when i refresh the page i don't want the rating to be gone cause i wanna render that rating in other components of my posts ?
THANK YOU! You saved my day
Great Video. Thank you so much :)
Many thanks for this!!!!!
Hey dude, thanks for the video. Got a reason to learn making react components. Btw which terminal are you using
?
Thanks! The terminal is alacrity, I might make a video on it later.
Thanks a lot!
hey! loved the video, very clean and stream-lined explanation. i'd love to see how to go about storing the star rating for each route in somewhat of a database. say i have blog posts and wanted to enable each post to be rated. where and how do I store the ratings? i've seen some stuff with Firebase but i'm quite the newbie here, a bit clueless :)
Will make some videos on Firebase and databases soon!
Hi Eric! nice video, it helped me a lot. How would you store the rating value that was set in local storage?
Glad it helped! The same time you set the state in the onChange event, you would save to localStorage with something like localStorage.setItem('starRating', JSON.stringify(value)). Then whenever the page loads (e.g. in a useEffect hook), you would do the opposite with getItem and set the value to state. developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
@@EricMurphyxyz thank you Eric 😊👍
Hi Anastasia, did you manage it? If so, can you please share your answer?
Thank you so much!
thanks!, I will use this treasure of code :)
Great job!
what is the font that you set it to your vs code editor. i like it a lot
thank you so much !
Hello! I'm trying to do this but I want just one star to remain selected and I don't really succeed. Do you have any hints ? they will help me a lot. Thanks ! 🙂
thanks for this video
Do i need to restart chrome after installing the extension? For some reason it is saying my REACT APP isn't a react page.
Thank you super clear
how would you increase by half a star instead of a full star? Very good video
how can we do this rating globally in different route? currently its work for locally, when i try to do it globally its select all the item in the array
Great! Thank you!!!
Thanks bro. How can I display the average of rating which by people rated on our website????
Thank you!
Hi thanks a lot alrdy :) Is it possible to make half stars? Like 4,5
many thanks bro
Thank you :D
thank you
Thanks a lot for this. Are you sure that the order of the elements in the (hover || rating) make a difference ? Shouldn't it be true anyway if any of these is true ?
Right, my mistake. Those can be in any order.
@@EricMurphyxyz Actually you are right. Still need to figure out why this is but I was definitely wrong.
Would there be anyway to make it half stars?
Thank you
thanks man
ive tried this method and it works pretty good other than i cannot figure out how to hide the radio button. even tho you show how you do it, it doesnt work for me
Hey hi Eric ur video was really helpful just a small query what if the ratings are numbers that is coming from any data set how can I convert those numbers like 4,5,3 or any number into star rating for example in my data set ratings set by customer is 4 now i just want to take that data and pass it on to my star component to show those exact ratings as star ratings how am i supposed to pass that number into this component so that directly it displays me rating according to that instead of asking me for input can you please help !
I would do the same as this video, but instead of coloring them in based on the selection, color them in based on the value from your customer that you pass in. May do a video on this later!
thx! You are best
:*
How would you reset the rating value when you use it in a form after submission?
Set the rating state to null? It depends how you have it set up
Hello, Excellent video. Liked and Subscribed. Can u explain on how to store those ratings done by a user in the MongoDB ? This will be really helpful for me. Thanks in advance :)
I like MongoDB, may do some videos about it in the future!
Thanks a lot man, but the problem is, why I couldn't figured it out by myself? can you give us an advise to make our logic works better? thank you
One cuestion: Why don't work the hover in responsive way? whe I take responsive way in a developer tool, the hover isn't run. Thanks! the video it's really good
Okay then how do I get this ratingValue in another component?
thanks alot , by the way whats your theme ? :)
It's Monokai Pro Spectrum, you can search for it in the extension store
nice explain
Hi Eric how do you display stars based on a given number from an api call like 3/5 ?
Pass the number from the api call down via props and pass it to the star rating component
this video was very helpful than you very much
thanks man :)
How to add half star functionality?
lovely .
what operating system are you using in this video?
Linux
that is smart!
How to set the star rating value to null after a button click?Please help me out
setRating(null)
What is your color theme in Vsc
Monokai Pro Spectrum
спасибо
How can I get the rating value to a parent form that called this component?
You would declare the state in the parent component and then pass down setValue to the child via props. You can then access the value in the parent.
@@EricMurphyxyz Wow, that as fast, thanks!
10 / 10
thanksssssssss
when i refresh the page will it be lost? How to serve customers?
Save it to a database
@@EricMurphyxyz for each address I store them in an existing object and have key: value as starRating: number. How can I use number in starRating to display the number of stars of each address in an array with many objects in it, thank you and sorry for my bad english
@@quangaonguyen7898 Loop over the array with something like map and pass the starRating value to the StarRating component
Hello friend, I saw the video and you did not use any module or external npm library but it confuses me that at the beginning you put "react-star-rating" that is the name of a library or the name of the project that you create with create react app, because there are a library called so i thought you use it cameronroe.github.io/react-star-rating/
Yeah, react-star-rating is just the name of the example project I made, nothing to do with the npm library. You can do it easily yourself, no need to bring in a library to do the star rating component for you!
@@EricMurphyxyz Thank you
Vscode theme?
Monokai Pro Spectrum
Did any body gets this ?--Parsing error: Unexpected character '≤'.
Sounds like you need to find and remove the invalid character