All comments

@ramonsebastianlunaSubmitted about 1 year 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-tsuPosted about 1 year ago

Feedback

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

Repetition and Lack of DRY (Don't Repeat Yourself) Principle

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.

Complex State Management

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

Scalability

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.

Improved Version

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