Как собрать значение Switch в React JS + Ant Design

Question

Прошу прощения за мои базовые знания и мой базовый английский:)

Мой вопрос: Как скрыть значение переключателя [Я использую Переключатель для каждой записи в таблице]

Это стол https://ibb.co/3TVLBK6

Я создал таблицу с одной ячейкой / полем, используя Switch (On / Off) И я хочу получить значение переключателя, когда они на

А вот и код

const columnsTableDepartmentModal = [
{
  title: 'No',
  dataIndex: 'no',
  key: 'no',
}, 
{
  title: 'Department',
  dataIndex: 'department',
  key: 'department',
}, 
{
  title: 'Select',
  dataIndex: 'select_department',
  key: 'select_department',
  render: (e, record) => (
    <Switch 
      defaultChecked={e} 
      onChange={
        (value) => onChangeSwitch(value,record)
      } 

      checkedChildren="Yes"
      unCheckedChildren="No"
      />
  ),
}];

Это то, что я сейчас пытаюсь

function onChangeSwitch(isSelect,record){
  console.log(e); // True / False
  console.log(record); // True / False

  if(isSelect){
    // push data to array
  }

  if(!isSelect){
    // pop data from array

  }
}

Вот так я показываю таблицу

<Modal
        title={modalDepartmentTitle}
        visible={visibleDepartment}
        width={800}
        onOk={handleOkDepartment}
        onCancel={handleCancelDepartment}  
        footer={[
          <Button key="submit" type="primary" onClick={handleOkDepartment}>OK</Button>,
          <Button key="button" type="danger" onClick={handleDeleteDepartment}>DELETE</Button>,
          <Button key="back" onClick={handleCancelDepartment}>CANCEL</Button>,
        ]}
      >
        <Table 
          columns={columnsTableDepartmentModal}  
          dataSource={stateDepartment.data} 
          pagination={false} 
          scroll={{y: 325}}
          />
    </Modal>

Ожидаемый результат: 1,3,4

Заранее спасибо

Answer 1

В соответствии с ответом @jose я внедрил концепцию с этим кодом

  const [theArray, setTheArray] = useState([]);
  const addEntry = useCallback((value) => {
    setTheArray([...theArray, `${value}`]);
  });

Тогда в функцию мы можем добавить значение

 function onChangeSwitch(isSelect,record){
  console.log(isSelect); // True / False
  console.log(record); 


  addEntry(record.no);

  if(isSelect){
    // push data to array
  }

  if(!isSelect){
    // pop data from array

  }
}

Итак, когда мы показываем {enty}

 <div key="adkfkdfkda">{theArray.map(entry =>
            <span key={entry}>{entry},</span>
     )}
 </div>

Мы получили значение, слитое в строковом формате

https://ibb.co/nQFK1C4

Спасибо.

Answer 2

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import Switch from 'react-switch'; 

class App extends Component {
  constructor() {
    super();
    this.state = {
      checkedPos: [],
      info: [],
    };
  }

  componentWillMount()
  {
     let tmp = []
     let pos = []
     for (var i = 1; i < 6; i++) {
       tmp.push("Info " + i)
       pos.push(false);
     }
     this.setState({
       info: tmp,
       checkedPos: pos
     })
   }

  handleChange(index, info)
  {
    if (!this.state.checkedPos[index])
    {
      this.setState(prev => ({
         checkedPos: prev.checkedPos.map((val, i) => !val && i === index ? true : val),
      }))
    }
    else if (this.state.checkedPos[index])
    {
      this.setState( prev => ({
         checkedPos: prev.checkedPos.map((val, i) => val && i === index ? false : val),
      }))
    }
  }

  render() {
    const listItems = this.state.info.map((item, index) =>
      <div>
        {item}
        <Switch checked={this.state.checkedPos[index]}
          onChange={ () => this.handleChange(index, this.state.info[index])}/>
        {"  Value is " + this.state.checkedPos[index]}
      </div>
    );

    return (
      <div>
        {listItems}
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

Демо здесь