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>
);
};
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
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.