antd Switch checked property

user_13253077 0
Viewed 6212

I want to ask a question about the Swtich component from antd the React UI library.

<Switch checked={true} />

When I set checked property I no longer can change it! I have looked at the API on the antd website but I can't understand why it doesn't work.

Please also have a look at my sample code here on codesandbox.io

antd reactjs
3 Answers

It is because the component is controlled and the value is always set to true.

You can do 2 things here:

  1. Update checked to defaultChecked
  2. Add state variable and an onChange event. You can also check the working codesandbox: https://codesandbox.io/s/beautiful-archimedes-v26kq?file=/src/App.js:111-336
export default function App() {
  const [checked, setChecked] = React.useState(true);
  return (
    <div className="App" style={{ marginTop: 100 }}>
      <Switch checked={checked} onChange={setChecked} />
    </div>
  );
}

Read more about controlled component here: https://reactjs.org/docs/forms.html#controlled-components

user_91190530 
import React, { useState } from "react";
import "./styles.css";
import "antd/dist/antd.css";
import { Switch } from "antd";

export default function App() {
  const [isStatus, setStatus] = useState(false);

  const buttonHandler = () => {
    setStatus((status) => !status);
  };

  return (
    <div className="App" style={{ marginTop: 100 }}>
      <Switch onChange={buttonHandler} checked={isStatus} />
    </div>
  );
}
user_10454260

here is how you can handle it

export default function App() {
  const [active, setActive] = useState(true);

  return (
    <div className="App" style={{ marginTop: 100 }}>
      <Switch onClick={() => setActive(!active)} checked={active} />
    </div>
  );
}
user_53794370
Related