I need to draw a filled star when item is in favourite. But now I have always blank star in the beginning (even if checkFav returns true).
Example: itemId is 5 checkFav returns true in its calling in isFav useState in jsx element isFav false
Result: not filled star, but on every click it changes correctly (so its adding and deleting to favourite list)
function CardPage() {
const { itemId } = useParams();
const [beer, setBeer] = useState([])
useEffect(() => {
const fetchData = async () => {
const result = await axios(`https://api.punkapi.com/v2/beers/${itemId}`)
setBeer(result.data[0])
}
fetchData();
}, [itemId])
const checkFav = () => {
const icons = store.getState().favourite
for (let i = 0; i < icons.length; i++) {
if (icons[i].id === itemId) {
return true //thats returning true
}
}
return false
}
const [isFav, setIsFav] = useState(checkFav())
const toggleFav = () =>{
if (isFav === false) {
setIsFav(true)
} else {
setIsFav(false)
}
}
return (
<div className="cardPage">
<img src={beer.image_url} alt={beer.name} className="cardPage__image" />
<div className="cardPage__content">
<div className="cardPage__favourite" onClick={toggleFav}>
{isFav ? <i className={`pi pi-star-fill cardPage__star`} /> : //thats drawing like false
<i className={`pi pi-star cardPage__star`} />}
</div>
</div>
</div>
)
}
export default CardPage
if (icons[i].id.toString() === itemId) {
Converting the id to toString() will help you solve your query since you're also checking for type using ===.
useState in ReactJS is asynchronous, thus it takes certain milli seconds to update before which the component would have already been rendered. One approach I found working was to directly use the value returned from the methods rather than setState.
<div className="cardPage__favourite" onClick={toggleFav}>
{checkFav() ? <i className={`pi pi-star-fill cardPage__star`} /> :
<i className={`pi pi-star cardPage__star`} />}
</div>
Also once you set the isFav using setIsFav, you can use its value in other methods using the state variable isFav.