Re07-usepopcorn > src > StarRating | Is isFixed state redundant?

[devYuraKim]

function StarRating({ maxRating = 5 }) {
  const [rating, setRating] = useState(0);
  const [tempRating, setTempRating] = useState(0);
  const [isFixed, setIsFixed] = useState(false);

  function handleRating(i) {
    setRating(i + 1);
    setIsFixed(true);
  }

  return (
    <div style={containerStyle}>
      <div style={starContainerStyle}>
        {Array.from({ length: maxRating }, (_, i) => (
          <Star
            key={i}
            onClick={() => handleRating(i)}
            isFilled={tempRating ? tempRating > i : rating > i}
            onMouseEnter={() => setTempRating(i + 1)}
            onMouseLeave={() => setTempRating(0)}
          />
        ))}
      </div>
      <p>{tempRating ? tempRating : isFixed ? rating : ""}</p>
    </div>
  );
}

export default StarRating;

[devYuraKim]

Yes, it is redundant.

• rating: Stores the final rating when the user clicks a star.
• isFixed: Indicates whether the rating has been finalized (by clicking).

In reality, isFixed is essentially performing the same function as setRating, which is to finalize the value when clicked.

Silly me 👀

[devYuraKim]

replace tempRating ? tempRating : rating ? rating : "" with tempRating || rating || "" which means if logical operand is truthy then return, if not proceed