Menu
I have created a form where a user can pick options prior to submitting the form. I am hiding the checkboxes with display: none and am styling the <label> so that when the user clicks the label it triggers the checkbox.
I've got this to work in vanilla HTML and CSS, however when I try this in React, clicking the label doesn't do anything. ONLY if I unhide the checkbox am I able to click on the checkbox and am able to see the label styling. I want to hide the checkbox though.
Does anyone know how to hide the checkbox and still able to click the label in ReactJS?
Here is the codepen of what I am trying to build in ReactJS.
332
Clickable Checkbox LabelAll checkboxes have labels, but not all use label tags. This makes it hard for users to tick the checkbox. Without label tags, users can't click the label to tick the checkbox.
In React, the best way to do this is via the useState hook. This is different from normal JavaScript because we are unable to access the value of the checkbox directly from its DOM component: /* Create a checkbox functional component. Toggle the text of a paragraph with the checkbox using the 'useState' hook.
Use the target. checked property on the event object to check if a checkbox is checked in React, e.g. if (event. target. checked) {} .
Use htmlFor instead of for in react (see react supported attributes):
<input type="checkbox" id="check3"/> Fish
<label htmlFor="check3"><span class="fa fa-check"/></label>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
