CODEWITHSUNDEEP
javascriptreactjstypescriptreact-hooks
Peloucvo
Peloucvo

Reputation: 238

My typescript function doesn't work without unused useState

I have two simple functions for adding and removing items to array

Function isInComparator() should check if item based on id read from checkbox value is in array or not and I need to change checkbox title to "remove", or "add"

It works with this code, but when I delete setLabelValue(value); row, it stops working and I don't understand why, because I am not even using it now

export const ProductItemBox = ({
      product,
    }: ProductProps): JSX.Element => {
      const [labelValue, setLabelValue] = useState("");
      let idsToCompare: string[] = [] || "";
      let productId: string;
      let isChecked = false;
      let value = "";
    
  const handleComparator = (productId: string) => {
    if (idsToCompare.includes(productId)) {
      idsToCompare = idsToCompare.filter((e) => e !== productId);
    } else {
      idsToCompare.push(productId);
    }

    setLabelValue(value);
  };

  const isInComparator = (productId: string) => {
    if (idsToCompare.includes(productId)) {
      value = "remove";
      isChecked = true;
    } else {
      value = "add";
      isChecked = false;
    }
    return isChecked;
  };
    <li key={product.productId}>
            <div className="comparator-form">
              <input
                type="checkbox"
                id={product.productId}
                value={product.productId}
                defaultChecked={isInComparator(product.productId)}
                onChange={() => handleComparator(product.productId)}
              />
              <label htmlFor={product.productId}>{value}</label>
            </div>
    </li>
  );
};

Upvotes: 0

Views: 82

Answers (2)

Tejashree Surve
Tejashree Surve

Reputation: 121

As @Marat said above, I am just providing you the same solution but in details.

export const ProductItemBox = ({
      product,
    }: ProductProps): JSX.Element => {
      const [labelValue, setLabelValue] = useState("");
      // as you can use useState hook with typeScript rules 
      const [idsToCompare,setIdsToCompare ]= useState<string[]>([]);
//      let idsToCompare: string[] = [] || "";
      let productId: string;
      let isChecked = false;
      let value = "";
    
  const handleComparator = (productId: string) => {
    if (idsToCompare.includes(productId)) {
      idsToCompare = idsToCompare.filter((e) => e !== productId);
    } else {
      // set the idsToCompare
      setIdsToCompare(oldArray => [...oldArray, productId]);
      // idsToCompare.push(productId);
    }

    // setLabelValue(value);
  };

  const isInComparator = (productId: string) => {
    if (idsToCompare.includes(productId)) {
      value = "remove";
      isChecked = true;
    } else {
      value = "add";
      isChecked = false;
    }
    return isChecked;
  };
    <li key={product.productId}>
            <div className="comparator-form">
              <input
                type="checkbox"
                id={product.productId}
                value={product.productId}
                defaultChecked={isInComparator(product.productId)}
                onChange={() => handleComparator(product.productId)}
              />
              <label htmlFor={product.productId}>{value}</label>
            </div>
    </li>
  );
};

Let me know if this solve the issue.

Upvotes: 1

Marat
Marat

Reputation: 629

This happens because setting state causes rerender of your component and when you don't set it the component does not rerender. You need to make idsToCompare a state variable and set it with setState, not just push to the array

You can learn everything you need to know about state here

Upvotes: 2

Related Questions