score:0

Accepted answer

You can have two state values saving the state of two switches. And to identify which switch was checked you can either use two different onChange callbacks to identify which switch was clicked. Demo code below:

import React,{ useState } from 'react';
import { Switch } from 'antd';
import './App.css';

const App = () => {
  const [toggleSwitchOne, setToggleSwitchOne] = useState(false) ;
  const [toggleSwitchTwo, setToggleSwitchTwo] = useState(false) ;

  const onChangeSwitchOne = (checked) => {
    console.log(`switch 1 to ${checked}`);
    setToggleSwitchTwo(!toggleSwitchOne)
  }

  const onChangeSwitchTwo = (checked) => {
    console.log(`switch 2 to ${checked}`);
    setToggleSwitchTwo(!toggleSwitchTwo)
  }

  return(
  <div className="App">
    <Switch checked={toggleSwitchOne} onChange={onChangeSwitchOne}></Switch>
    <Switch checked={toggleSwitchTwo} onChange={onChangeSwitchTwo}></Switch>
  </div>
);

}
export default App;

score:0

you can send some id to manage this. Your code for switch will be converted to something like this.

import React,{ useState } from 'react';
import { Switch } from 'antd';
import './App.css';



const App = () => {
  const [toggle, setToggle] = useState() ;

  const onChange = (id,checked) => {
    console.log(`switch to ${id} is ${checked}`);
  }
  return(
  <div className="App">
    <Switch onChange={(checked)=>onChange("ab",checked)}></Switch>
     <Switch onChange={(checked)=>onChange("cd",checked)}></Switch>
  </div>
);

}
export default App;


Related Query

More Query from same tag