Interactive Rating made with ReactJS and SASS

The code you shared has a couple of issues that make it less than ideal. Let's break it down:

The code you've shared suffers from a lack of adherence to the DRY principle, which stands for "Don't Repeat Yourself." This principle encourages code reuse and the minimization of redundancy. In your code, you're using separate state variables such as inputOneIsActive, inputTwoIsActive, and so on, and employing repetitive if-else conditions to manage the active state of inputs. This approach can lead to code that is harder to maintain and expand.

Managing separate state variables for each input and manually toggling them based on conditions results in verbose and error-prone code.

The code becomes increasingly unwieldy as the number of inputs grows. Adding more inputs would require adding additional state variables and expanding the setStateActive function, making it difficult to maintain.

Here's an improved version of the code that adheres to the DRY principle:

import { useEffect, useState } from "react";
import InputRating from "./InputRating";

const ListRating = ({ getSelected }) => {
  const [isChecked, setIsChecked] = useState(0);

  useEffect(() => {
    getSelected(isChecked);
  }, [isChecked]);

  const handleIdParent = (idChildren) => {
    setIsChecked(idChildren);
  };

  return (
    <div className="container-inputs">
      {[1, 2, 3, 4, 5].map((optionNumber) => (
        <InputRating
          key={optionNumber}
          numberOption={optionNumber}
          idOption={optionNumber}
          handleIdParent={handleIdParent}
          onClick={() => setIsChecked(optionNumber)}
          bgColor={isChecked === optionNumber}
        />
      ))}
    </div>
  );
};

export default ListRating;