I attempted to use the initial data as a class and wrote code to cross out the label for incoming data if it exists in the class. Unfortunately, this approach did not work as expected and did not result in any errors either.
import { useState } from "react";
export default function ShopList({ item, index }) {
const [checkValue,setCheckValue] = useState('');
return (
<div>
<div className="mb-[0.125rem] block min-h-[1.5rem] pl-[1.5rem]" data-index={index}>
<input type="checkbox" onChange={(e)=> setCheckValue(e.target.checked)} />
<label
className={`inline-block pl-[0.15rem] hover:cursor-pointer ${checkValue} true:line-through `}>
{item}
</label>
</div>
</div>
);
}
Is there a solution to this issue?