As I work on creating a rating component that utilizes react-icons to display icons, I have encountered an interesting challenge. Currently, I am using the FaStarhalf icon which represents a pre-filled half star that can be flipped to give the appearance of half stars. While this solution serves its purpose well, I am seeking a more efficient way to indicate when a star is being selected. Unfortunately, the current version of react-icons lacks the capability to completely fill an icon like I desire. The FaRegStarHalf icon, another offering from react-icons, resembles a cut-out star but cannot be filled in.
This brings me to my inquiry: Is it feasible for the FaStarHalf component to dynamically change all instances of itself into their filled counterparts within the react-icons library upon being clicked? Can a component modify itself to become a different component?
Rater
import React, { useState } from 'react'
import { FaStarHalf } from 'react-icons/fa'
import './styles/Rater.css'
const Rater = ({ iconCount }) => {
const [rating, setRating] = useState(null)
const [hover, setHover] = useState(null)
return (
<div>
{[...Array(iconCount), ...Array(iconCount)].map((icon, i) => {
const value = (i + 1) / 2
return (
<label>
<input
type='radio'
name='rating'
value={value}
onClick={() => {
console.log(`value => `, value)
return setRating(value)
}}
/>
<div className='star-container'>
<div>
<FaStarHalf
className={i % 2 ? 'star-left' : 'star'}
color={value <= (hover || rating) ? '#ffc107' : '#e4e5e9'}
onMouseEnter={() => setHover(value)}
onMouseLeave={() => setHover(null)}
/>
</div>
</div>
</label>
)
})}
</div>
)
}
export default Rater
FaHalfStar
https://i.sstatic.net/va71M.png
FaRegHalfStar