Is there a way to put const values in a useState({})

Question

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!

Answer 1

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>

Answer 2

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