Community feedback

• 

  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

  0

  ---

  

  Sebastián Luna•20

  @ramonsebastianlunaPosted about 1 year ago

  @tsuramii Excellent contribution!!! I'm going to implement it in the code! Thanks!

  0