React Materialize Switch Always Has the Value "on"

Question

I'm using the React Switch component straight from this website: http://react-materialize.github.io/react-materialize/?path=/story/components-switch--switch. I put this into my SideNav like so:

<Switch
    id="Switch-11"
    offLabel="Off"
    onChange={(e) => exampleFunction(e)}
    onLabel="On"
/>

I did it so that when the switch is clicked, it would call "exampleFunction()" which contains this:

const exampleFunction = (e) => {
    console.log(e.target.value)
}

The problem is that when I look at the console for the value of the switch, it is always "on," even if I press it multiple times. I'm a little lost as to why this happens. Any advice would be appreciated. Thanks.

Answer 1

If you want to know whether the checkbox is checked, you need to use e.target.checked, looking at the source code from materialize, we can see the onChange is passed directly to the input element, so you need to use the checked attribute of the input element.

The value attribute has the following definition:

The value property sets or returns the value of the value attribute of a checkbox.

For checkboxes, the contents of the value property do not appear in the user interface. The value property only has meaning when submitting a form. If a checkbox is in checked state when the form is submitted, the name of the checkbox is sent along with the value of the value property (if the checkbox is not checked, no information is sent).

From: https://www.w3schools.com/jsref/prop_checkbox_value.asp