I'm pretty new to react, and I'm working on a component where I'm calculating the percentages of values in below useState, so for instance:
const [data, setData] = useState({ five: 5, four: 4, three: 3, two: 2, one: 1 });
const [percentage, setPercentage] = useState(0);
const fields = [
{ name: "five", value: data.five },
{ name: "four", value: data.four },
{ name: "three", value: data.three },
{ name: "two", value: data.two },
{ name: "one", value: data.one }
];
useEffect(() => {
const per1 = ((data.one) / (data.five + data.four + data.three + data.two + data.one)) * 100;
setPercentage(per1);
}, [data]);
I have constants that I created to calculated the amount of ratings for each type of rating for instance: the number of five star, four star, etc. :
const numRating5 = product.reviews.filter((x) => x.rating === 5);
const numRating4 = product.reviews.filter((x) => x.rating === 4);
const numRating3 = product.reviews.filter((x) => x.rating === 3);
const numRating2 = product.reviews.filter((x) => x.rating === 2);
const numRating1 = product.reviews.filter((x) => x.rating === 1);
Is there a way for me to put the numRating5, numRating4,.... in their respective positions (five:5, four:4,...) in the useState. I would really appreciate any help or guidance on this. Thank you!
You can try something like this:
const product = {
reviews: [
{rating: 1},
{rating: 2},
{rating: 3},
{rating: 4},
{rating: 5},
]
};
const getNumRating = (num) => product.reviews.filter((x) => x.rating === num).length;
const numRating5 = getNumRating(5);
const numRating4 = getNumRating(4);
const numRating3 = getNumRating(3);
const numRating2 = getNumRating(2);
const numRating1 = getNumRating(1);
const useState = React.useState;
const useEffect = React.useEffect;
function App() {
const [data, setData] = useState({
five: numRating5,
four: numRating4,
three: numRating3,
two: numRating2,
one: numRating1
});
const [percentage, setPercentage] = useState(0);
useEffect(() => {
const per1 = (
data.one / (data.five + data.four + data.three + data.two + data.one)
) * 100;
setPercentage(per1);
}, [data]);
return (
<div>
Hello! Percentage = {percentage}
</div>
);
}
ReactDOM.render(<App/>, document.getElementById("root"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="root"></div>you can update the data using setData and pass the object
setData ({
five : numRating5,
four : numRating4,
three : numRating3,
two : numRating2,
one : numRating1,
});
please check: https://reactjs.org/docs/hooks-state.html for further information