Project 3 from 25 projects (star rating)

 1 Create a component called "star-rating".

2 Installed react icons package.

3 Created an array with ...Array .map which returns an icon with key, onClick, inMouseMove, onMouseLeave, size.

4 Created two useStates hover and rating.

5 On icon, onClick handles handleClick, onMouseMove handles handleMouseEnter and onMouseLeave handles handleMouseLeave with props of index.

6 handleClick with gecurrrentIndex setsRating to getCurrentIndex.

7 handleMouseEnter setsHover to getCurrentIndex.

8 handleMouseLeave setsHover to default rating.

9 Set the className in such a way that if index is <=(hover OR rating) then the className is active else it is inactive.

10 Set the color is style.css.






Note: ...Array means an array which updates along with previous arrays.

Comments

Post a Comment

Popular posts from this blog

Project 4 of 25 Projects (Infinite Scroll)

 1 Component Infinite Scroll. 2 Created 3 useStates; loading to check to load or not, items to set the items from api, count to count the pages. 3 Created a useEffect which calls the function fetchProducts(). 4 An async function fetchProducts is created. where try and catch is applied. 5 In try set loading is set to true, a constant response and data is created to await and fetch the data. 6 If data and data.products and data,products.length is true then setItems is set to data.products. 7 In div return, if items and items.length is true then, item.map is ran with a div with key inside of which is a img and p whose values are set according to the api. 8 A button is made which on Click  sets setCount to count+1. 9 A useState disable is created which is initially true, to disable the button when max 100 products is reached. 10 the setItems in fetchData() function is modified  where prevData is set to ...prevData, ...data.products to that all the products are shown from befo...
Read more