antd switch react - how to distinguish one switch from another

Question

I would like to implement simple logic on my website using antd switches so I can control my hue lights basically if switch one is checked then console.log("switch one is checked"). But i don't know how to distinguish one switch from another.

here is my App.js

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



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

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

}
export default App;

Right now there is no way how to distinguish the click of the on switch from click of the other switch.

Answer 1

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;