{"id":12410,"date":"2025-05-27T07:50:30","date_gmt":"2025-05-27T07:50:30","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=12410"},"modified":"2025-05-27T07:50:30","modified_gmt":"2025-05-27T07:50:30","slug":"react-rating-stars-component","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/react\/react-rating-stars-component","title":{"rendered":"React: Not able to render react-rating-star component with correct value"},"content":{"rendered":"<p>The react-rating-stars-component is a simple and customizable star rating component for React projects. It allows users to easily add interactive star ratings to their applications.<\/p>\n<h2>Description<\/h2>\n<p>This component provides a straightforward way to implement star ratings, with support for half stars and custom characters, enhancing the user experience with visually appealing and functional rating systems.<\/p>\n<h2>Usage Examples<\/h2>\n<p>Here is an example demonstrating how to use the component:<\/p>\n<h3>Basic Implementation:<\/h3>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nimport ReactStars from \"react-rating-stars-component\";\r\nimport React from \"react\";\r\nimport { render } from \"react-dom\";\r\nconst ratingChanged = (newRating) =&gt; {\r\n  console.log(newRating);\r\n};\r\nrender(\r\n  &lt;ReactStars\r\n    count={5}\r\n    onChange={ratingChanged}\r\n    size={24}\r\n    isHalf={true}\r\n    emptyIcon={&lt;i className=\"far fa-star\"&gt;&lt;\/i&gt;}\r\n    halfIcon={&lt;i className=\"fa fa-star-half-alt\"&gt;&lt;\/i&gt;}\r\n    fullIcon={&lt;i className=\"fa fa-star\"&gt;&lt;\/i&gt;}\r\n    activeColor=\"#ffd700\"\r\n  \/&gt;,\r\n  document.getElementById(\"where-to-render\")\r\n);\r\n<\/pre>\n<h2>Key Features<\/h2>\n<p>The component offers a variety of customizable props:<\/p>\n<ul>\n<li>count: Specifies the total number of stars.<\/li>\n<li>value: Sets the initial rating value.<\/li>\n<li>char: Allows using a custom character for the star.<\/li>\n<li>color: Sets the color of inactive stars.<\/li>\n<li>activeColor: Sets the color of selected\/active stars.<\/li>\n<li>size: Controls the size of the stars.<\/li>\n<li>edit: Determines if the rating is selectable or just for display.<\/li>\n<li>isHalf: Enables or disables half-star ratings.<\/li>\n<li>emptyIcon, halfIcon, filledIcon: Allows using custom elements for star icons.<\/li>\n<li>a11y: Makes the component accessible and controllable via keyboard.<\/li>\n<li>onChange: A callback function invoked when the rating changes.<\/li>\n<\/ul>\n<h2>Problem: <\/h2>\n<p>When integrating react-rating-stars-component with Firestore, the rating may not render correctly on the initial page load, even though the data is correctly fetched. This can happen because the useEffect hook updates the rating state after the initial render, and React may not re-render the component immediately.<\/p>\n<h3>Solution:<\/h3>\n<p>To ensure the ReactStars component always receives the correct, updated rating value, you can use a loading state. This way, the component only renders after the data is fetched and avoids the race condition.<\/p>\n<div class=\"qanda-read-box\"><div class=\"bg-light read-more-icon\"><img decoding=\"async\" src=\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/04\/24061434\/read-txt.png\" alt=\"Also Read\"><p><\/p><h3>Also Read:<\/h3><a href=\"https:\/\/www.bacancytechnology.com\/blog\/react-performance-optimization\" target=\"_blank\">React Performance<\/a><\/div><\/div>\n<p><strong>Here\u2019s an optimized example:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nimport ReactStars from \"react-rating-stars-component\";\r\nimport React, { useState, useEffect } from \"react\";\r\nimport { db } from '.\/firebaseConfig'; \/\/ Import your Firestore configuration\r\n\r\nfunction MusicTrackRating({ track, spotifyId, id }) {\r\n    const [rating, setRating] = useState(0);\r\n    const [loading, setLoading] = useState(true); \/\/ Loading state\r\n    useEffect(() => {\r\n        const fetchRating = async () => {\r\n            try {\r\n                const docSnap = await db.collection(\"userData\").doc(spotifyId).get();\r\n                const songInfo = docSnap.data()?.[id.id]; \/\/ Optional chaining\r\n\r\n                if (songInfo?.rating !== undefined) {\r\n                    setRating(songInfo.rating);\r\n                }\r\n            } catch (error) {\r\n                console.error(\"Error fetching rating:\", error);\r\n            } finally {\r\n                setLoading(false); \/\/ Set loading to false after fetching\r\n            }\r\n        };\r\n\r\n        fetchRating();\r\n    }, [spotifyId, id.id]);\r\n\r\n    const ratingChanged = (newRating) => {\r\n        console.log(newRating);\r\n        \/\/ Update Firestore with the new rating\r\n    };\r\n\r\n    if (loading) {\r\n        return <div>Loading rating...<\/div>;\r\n    }\r\n    return (\r\n        <div className=\"musicTrackInfoDiv\">\r\n            <div className=\"musicTrackTitleAndArtist\">\r\n                <label className=\"musicTrackTitle\">{track.name}<\/label>\r\n                <label className=\"musicTrackArtist\">{track.album?.artists[0].name}<\/label>\r\n                <ReactStars\r\n                    value={rating}\r\n                    count={5}\r\n                    onChange={ratingChanged}\r\n                    size={24}\r\n                    isHalf={true}\r\n                    emptyIcon={<i className=\"far fa-star\"><\/i>}\r\n                    halfIcon={<i className=\"fa fa-star-half-alt\"><\/i>}\r\n                    fullIcon={<i className=\"fa fa-star\"><\/i>}\r\n                    activeColor=\"#ffd700\"\r\n                \/>\r\n            <\/div>\r\n        <\/div>\r\n    );\r\n}\r\nexport default MusicTrackRating;\r\n<\/pre>\n<p>By using a loading state and ensuring that ReactStars only renders after the data is fetched, you eliminate the race condition and ensure the component always displays the correct rating.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The react-rating-stars-component is a simple and customizable star rating component for React projects. It allows users to easily add interactive star ratings to their applications. Description This component provides a straightforward way to implement star ratings, with support for half stars and custom characters, enhancing the user experience with visually appealing and functional rating systems. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":12411,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-12410","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/12410"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=12410"}],"version-history":[{"count":2,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/12410\/revisions"}],"predecessor-version":[{"id":12413,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/12410\/revisions\/12413"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/12411"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=12410"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=12410"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=12410"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}