How to Make Star Ratings in React js | React Tutorial For Beginners.

hey guys welcome to my youtube channel in this tutorial we are going to create star lettings in react this is the finished finished version basically this is a simple project intended to give you an idea about ratings it can be a part of any react application involving lettings here we have five stars and we can rate from one up to five simply by clicking on any star if you are new here make sure you click that subscribe button i have included the link to the github repository down in the description below so without further ado let's get started there are some steps we need to take before we even get started so need to create a new react project after you have done that the next thing we need to do is to install install react icons this will give us access to the star icon then we need to go ahead and start the development server before going further i'm gonna remove some unnecessary stuff behind the camera set the colors we will use we will use orange for displaying the rating value and a gray color for the remaining stars do to use the style icon we need to import it from react icons before we even display the stars i want to start the main container and put everything in the center let's see if this will work i want to set the container display property to flex and flex direction column and finally align items to center alright it works now let's see if we can display those five stars for the styling let's do stylus dot stars we'll add that in a second since we need five stars we can use an array of five elements that way we can use the map method to display 5 stars i want to set key property to index save and refresh we are getting an error because stars is undefined let's go ahead and create an array with size of five and fill it with zeros save and refresh all right now we have five stars to save the current rating value we need to create a state for that and give it a default value of zero use stead we also need to set a hover value and give it a default value of undefined now let's write three functions that will uphandle the change of events and update the state the first function is for handling the click event the handle click function is gonna take the new rating value as input variable and update the current rating value the second function is for handling the amount mouse over event and setting the hover value it will also take a new overvalue and update the hover value to the new value and finally handle mouse leave a function that will reset the hover value to undefine it now that we have done that let's give every icon the size of 24 for styling i want to give each icon a margin right property of 10 to keep the stars separated from each other let's also change the cursor property to the pointer then when we click on any star the handle click function is gonna update the current rating value so we need to pass in the new value according to the position of the clicked star here i'm passing index plus one the reason for using index plus one is because when we use the map method to the array the index index starts from zero not one now let's set the color of the stars according to the overvalue and rating value first when we hover over a star we are going to set the color according to the hover value if the hover value is undefined we use we will use the current rating value so if the overvalue or current value is less than the index the color will be set to orange otherwise it will be set to gray yeah it seems to be working the click event for the hover value we also do the exact same thing for hover event when the mouse is moved over the star we are gonna catch this event by using on mouse hover event then we when the mouse leaves we will catch this event using on mouse leave event the hover effect is also working as expected so the last step is to create an input field and a submit button here i'm going to use text area for text input and then a button we also need to apply some styles for styles i'm gonna do simple styles for text area and button do hmm for the button i'm gonna copy the same styles and it should work now do also everything is working as expected all right guys this is the end of the video i have included the link to the github repo in the description below and don't forget to subscribe if you haven't if you have any question comment it down below otherwise i will see you in another video

Channel: Albert DevArchive

Views: 5,855

Keywords: React js, Star Ratings, Albert

Id: l1Q7o8skKPM

Length: 14min 24sec (864 seconds)

Published: Sun Feb 07 2021