Star Rating

Hello friends,

In this article, I am going to share the one of most asked react interview question. i.e. Star Rating. It is a simple question by which interviewer can test state , event handling etc.

Intuition

1. Create the UI containing stars (i.e for given count).
2. Challenge yourself to print star using polygon property or HTML unicode. I am going with polygon.
3. Write function to change the colors of all stars behind the selected star.
4. Also handle same effect of changing the color while hovering the star.

Code -

import { useState } from "react";
import "./styles.css";

const STAR_COUNT = 7;

export default function App() {
  const [activeIdx, setActiveIdx] = useState(-1);
  const [currHover, setCurrentHover] = useState(-1);

  return (
    <div className="App">
      <div className="container">
        {new Array(STAR_COUNT).fill("")?.map((item, idx) => {
          return (
            <div
              key={item}
              onClick={() => setActiveIdx(idx)}
              onMouseEnter={() => setCurrentHover(idx)}
              onMouseLeave={() => setCurrentHover(-1)}
              className={`star ${
                idx <= (currHover !== -1 ? currHover : activeIdx)
                  ? "active"
                  : ""
              }`}
            ></div>
          );
        })}
      </div>
    </div>
  );
}        

CSS -

.App {
  font-family: sans-serif;
  text-align: center;

  .container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    background-color: grey;

    .star {
      width: 50px;
      height: 50px;
      border: 1px solid black;
      background-color: white;
      /* left - top coordinates  */
      clip-path: polygon(
        50% 0%,
        61% 35%,
        98% 35%,
        68% 57%,
        79% 91%,
        50% 70%,
        21% 91%,
        32% 57%,
        2% 35%,
        39% 35%
      );
    }

    .active {
      background-color: yellow;
    }
  }
}        

Stay tuned for upcoming articles ??

Follow for more such content ??

#ReactJS #JavaScript #TypeScript #NextJS #ReactDeveloper #JS #NodeJS