How to Fill Review Icons Depending on the Rating in React
1 year ago
admin
Reactjs
In today's lesson, we will see how to fill review icons depending on the rating in React, let's assume that we have an e-commerce website and we want to show the rating of each product.
Create a helper function
First, let's create a helper function that takes the rating as param and returns the number of star icons depending on the rating.
Here I am using Bootstrap 5 Icons you can use font awesome instead if you want.
export const showRating = (rating) => {
switch(rating){
case 1 :
return <i className="bi bi-star-fill text-warning"></i>;
case 2 :
return (
<>
<i className="bi bi-star-fill text-warning"></i>
<i className="bi bi-star-fill text-warning"></i>
</>
);
case 3 :
return (
<>
<i className="bi bi-star-fill text-warning"></i>
<i className="bi bi-star-fill text-warning"></i>
<i className="bi bi-star-fill text-warning"></i>
</>
);
case 4 :
return (
<>
<i className="bi bi-star-fill text-warning"></i>
<i className="bi bi-star-fill text-warning"></i>
<i className="bi bi-star-fill text-warning"></i>
<i className="bi bi-star-fill text-warning"></i>
</>
);
case 5 :
return (
<>
<i className="bi bi-star-fill text-warning"></i>
<i className="bi bi-star-fill text-warning"></i>
<i className="bi bi-star-fill text-warning"></i>
<i className="bi bi-star-fill text-warning"></i>
<i className="bi bi-star-fill text-warning"></i>
</>
);
default:
return 'something went wrong!'
}
}
Use the helper function
Next, we use the helper function to show star icons depending on the rating.
import React from 'react';
import { showRating } from './Helpers';
export default function ProductItem() {
const product = {
id: 1,
rating: 4
};
return (
<p>
{ showRating(product.rating) }
</p>
)
}