I’m pretty new to react, and I’m trying to create a rating component with both whole and half stars using conditional statements. The issue that I’m having is that the correct number of stars is not showing up. For instance, I have the rating set at 4.5, and I’m only seeing one star. When I blocked out all the conditional statements before the 4.5 statement, it correctly shows 4.5 stars. I’m not sure what I’m doing wrong, and I would really appreciate any help or guidance on how to fix this issue.
Thank you!
import React, {useState} from 'react';
import { createReview, detailsProduct } from '../actions/productActions';
import { useDispatch, useSelector } from 'react-redux';
import {FaStar} from 'react-icons/fa';
import {FaStarHalf} from 'react-icons/fa';
function StarRating () {
const productDetails = useSelector((state) => state.productDetails);
const { loading, error, product } = productDetails;
var rating = product.rating;
if (rating = 1)
{
return (
<FaStar />
);
};
if (rating >= 1.5 && rating < 2 ){
return (
<div>
<FaStar/>
<FaStarHalf/>
</div>
);
};
if (rating >= 2 && rating < 2.5){
return (
<div>
{[...Array(2)].map((star, i) => {
return (
<div>
<FaStar/>
</div>
);
})}
</div>
)
}
if (rating >= 2.5 && rating < 3){
return (
<div>
{[...Array(2)].map((star, i) => {
return (
<div>
<FaStar/>
</div>
);
})}
<div>
<FaStarHalf/>
</div>
</div>
);
}
if (rating >= 3 && rating < 3.5){
return (
<div>
{[...Array(3)].map((star, i) => {
return (
<div>
<FaStar/>
</div>
);
})}
</div>
);
}
if (rating >= 3.5 && rating < 4){
return (
<div>
{[...Array(3)].map((star, i) => {
return (
<div>
<FaStar/>
</div>
);
})}
<div>
<FaStarHalf/>
</div>
</div>
);
}
if (rating >= 4 && rating < 3.5){
return (
<div>
{[...Array(4)].map((star, i) => {
return (
<div>
<FaStar/>
</div>
);
})}
</div>
);
}
if (rating >= 4.5 && rating < 5 ){
return (
<div>
{[...Array(4)].map((star, i) => {
return (
<div>
<FaStar/>
</div>
);
})}
<div>
<FaStarHalf/>
</div>
</div>
);
}
if (rating >= 5){
return (
<div>
{[...Array(5)].map((star, i) => {
return (
<div>
<FaStar/>
</div>
);
})}
</div>
);
}
};
export default StarRating;