CheckBox with variable default value

Question

What's the best way to create a checkbox that gets a default status but can still be modified.

<div className="master">
    <input className="tgl tgl-skewed" id={id} type="checkbox" onChange={onChange} name={flag} checked={lock}/>
    <label className="slave tgl-btn" data-tg-off={flag + " is OFF"} data-tg-on={flag + " is ON"} htmlFor={id}></label>
</div>

In this example above I get a default status (lock) that can be "true" or "false" this changes the checkbox from "checked" to "unchecked". Unfortunately this also makes it impossible to change this status by clicking on the relevant checkbox.

Any ideas ?

Wai Ha Lee · Accepted Answer · 2020-11-08 21:20:44Z

1

You can use defaultChecked props for the input tag in react.

<input className="tgl tgl-skewed" id={id} type="checkbox" onChange={onChange} name={flag} defaultChecked={lock}/>

edited Nov 8, 2020 at 21:20

Wai Ha Lee

8,856102 gold badges61 silver badges100 bronze badges

answered Nov 8, 2020 at 14:02

topdev87

8,7913 gold badges11 silver badges33 bronze badges

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

Comments

CertainPerformance · Accepted Answer · 2020-11-08 14:04:23Z

Put the lock into state, and have the change handler toggle the boolean:

const App = ({ lock }) => {
  const [checked, setChecked] = React.useState(lock);
  const onChange = () => setChecked(!checked);
  const id = 'foo';
  return (
    <div className="master">
      <input className="tgl tgl-skewed" id={id} type="checkbox" onChange={onChange} checked={checked}/>
      <label className="slave tgl-btn" htmlFor={id}></label>
    </div>
  );
};
ReactDOM.render(<App lock={true} />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class="react"></div>

Collectives™ on Stack Overflow

CheckBox with variable default value

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