How can I make this "if" statement more clean and efficient?-CodePudding

I'm trying to optimize/clean the "if" statement. As you can see the code, it looks... pretty long and inefficient. If you were me, how would you fix and make it look/work better?

To explain about what I'm trying to build :

when the score is 5, I would like to push star icon 5 times to the "stars" array,
when the score is 4, I would like to push star icon 4 times to the "stars" array,
when the score is 3, I would like to push star icon 3 times to the "stars" array,
when the score is 2, I would like to push star icon 2 times to the "stars" array,
when the score is 1, I would like to push star icon 1 time to the "stars" array.

Code

import React, { useState } from "react";
import { AiFillStar } from "react-icons/ai";

const Review = ({ title, comment, score }) => {

  let stars = [];

  if (score == 5) {
    stars.push(<AiFillStar />);
    stars.push(<AiFillStar />);
    stars.push(<AiFillStar />);
    stars.push(<AiFillStar />);
    stars.push(<AiFillStar />);
  }

  if (score == 4) {
    stars.push(<AiFillStar />);
    stars.push(<AiFillStar />);
    stars.push(<AiFillStar />);
    stars.push(<AiFillStar />);
  }

  if (score == 3) {
    stars.push(<AiFillStar />);
    stars.push(<AiFillStar />);
    stars.push(<AiFillStar />);
  }

  if (score == 2) {
    stars.push(<AiFillStar />);
    stars.push(<AiFillStar />);
  }

  if (score == 1) {
    stars.push(<AiFillStar />);
  }

 
  return (
    <div className="review-container">
      <p>Title: {title}</p>
      <p>Comment: {comment}</p>
      {/* <p>Score: {star}</p> */}
      {stars.map((star) => star)}
    </div>
  );
};

export default Review;

CodePudding user response：

What you are looking for is a for-loop. It pushes the stars as often as your score high is.

The let i in the for-loop is just the iterator it counts up to the point int reaches your score-variable.

So if your score is 5, it makes 5 times push and if your score is 1, it makes 1 push.

import React, { useState } from "react";
import { AiFillStar } from "react-icons/ai";

const Review = ({ title, comment, score }) => {

  let stars = [];

  for (let i = 0; i < score; i  )
  {
    stars.push(<AiFillStar />);
  }

  return (
    <div className="review-container">
      <p>Title: {title}</p>
      <p>Comment: {comment}</p>
      {/* <p>Score: {star}</p> */}
      {stars.map((star) => star)}
    </div>
  );
};

export default Review;

CodePudding user response：

Don't need any for loop or useState. It can solve simply by ES6

import React from "react";
import { AiFillStar } from "react-icons/ai";

const Review = ({ title, comment, score }) => {
  return (
    <div className="review-container">
      <p>Title: {title}</p>
      <p>Comment: {comment}</p>
      {Array.from(Array(score).keys()).map((star) => (
        <AiFillStar key={star} />
      ))}
    </div>
  )
}

export default Review;

CodePudding user response：

let stars = [];
stars.fill(<AiFillStar />, 0, score)

Please refer to MDN array.fill() documentation.

Then you can .map() over stars array as you like.

Or even

[].fill(<AiFillStar />, 0, score).map(star => star)