React.JS creating toggle switch with state

Question

Currently I have a toggle switch from the Semantic UI React library and I am setting the checked property to be defaulted to false on the page.

I want to make it toggable so the user can click on it but I need to add a OnClick event property. I want to create a function to handle this but I don't want to use state hooks which were introduced in React.JS version 16 and am not sure how to go about it.

Here is my ToggleSwitch.tsx file where I create the toggle switch

    import * as React from "react";
import { Checkbox } from 'semantic-ui-react'
import * as PropTypes from "prop-types";

const ToggleSwitch = ({ id, name,label, checked, onclick }) => {

    return (
        <Checkbox
            name={name}
            id={id}
            label={label}
            checked={checked}
            onclick={onclick}
            toggle

        />
    );
}

ToggleSwitch.propTypes = {
    id: PropTypes.string.isRequired,
    checked: PropTypes.bool.isRequired,
    label: PropTypes.string,
    name: PropTypes.string,
    onclick: PropTypes.func,
   
};

export default ToggleSwitch;

I then insert the switch into my subheader.tsx which creates a subheader across multiple pages on my website which now will have this switch

import * as React from "react";
import ToggleSwitch from './new_layout/ToggleSwitch'

interface Props {
    name: string;
  renderAction?: () => any;
}




const SubHeader: React.SFC<Props> = ({ name, renderAction }) => {
    return (
        <div className="settings-submenu">
            <div className="settings-submenu-name">{name}</div>
            <div className="settings-submenu-name">{renderAction && renderAction()}</div>
            <ToggleSwitch name='LayoutToggleSwitch' label='Enable New Layout' id='LayoutToggleSwitch' checked={false} onclick = {} />

        </div>
    
  );
};

export default SubHeader;

I am not sure what to put in my OnClick function to make this switch able to be switched as currently when I click on it, it does not change from its checked value which is false

user16603402 · Accepted Answer · 2021-08-05 23:54:47Z

1

Using the checked attribute will prevent you from changing the state of the checkbox by clicking on it: You should probably use defaultChecked={false}.

However, you will still need some state management at some point if you want to interact with the checkbox: You can either use hooks (the React documentation provides a really easy-to-follow introduction to the useState hook), or use a state object you will update on click and pass to the checked attribute.

answered Aug 5, 2021 at 23:54

user16603402

Sign up to request clarification or add additional context in comments.

Comments

Noam Buzaglo · Accepted Answer · 2021-08-06 21:21:25Z

1

You can use useState in subHeader component and initialize it with false as the default value.

const [newLayoutEnabled, setNewLayoutEnabled] = useState(false);

const handleToggleSwitchClick = () => {
   setNewLayoutEnabled(!newLayoutEnabled);
}

And then pass newLayoutEnabled and handleToggleSwitchClick to ToggleSwitch component.

edited Aug 6, 2021 at 21:21

answered Aug 6, 2021 at 9:59

Noam Buzaglo

1213 bronze badges

Collectives™ on Stack Overflow

React.JS creating toggle switch with state

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related