JSX code demo:
<input
type="checkbox"
defaultChecked={myfilter.includes("Banana")}
/>
<span
onClick={onClickHandler}
className="banana">Banana
</span>
HTML equivalent code :
`<input
type="checkbox"
/>
<span
className="banana">Banana
</span>`
The main objective is to change the style of the span element when the input checkbox is checked. The checkbox element is initially hidden, hence this approach was necessary. Tried the following CSS which didn't yield the desired result:
input[type="checkbox"]:checked + :after{
background: yellow;
}