Frontend Mentor | Luca's profile

@ramonsebastianluna

Submitted 12 months ago

Hello there! On this occasion, I am very excited to share my solution to the Interactive Rating Challenge! Feel free to try the app whenever you want! See you in the next challenge! ;)

Interactive Rating made with ReactJS and SASS

Luca• 110

@dot-tsu

Posted 12 months ago

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;

Marked as helpful

Luca

All comments

Interactive Rating made with ReactJS and SASS