CODEWITHSUNDEEP
reactjsreact-nativereact-reduxantd
Onesinus Saut
Onesinus Saut

Reputation: 344

How to collect Switch value in React JS + Ant Design

I'm sorry for my basic knowledge and my basic english :)

My Question is: How to concenate switch value [I use Switch for each record in table]

This is the table https://ibb.co/3TVLBK6

I've created table with one cell/field using Switch (On/Off) And i want get the switch value when they are on

And here is the code

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"
      />
  ),
}];

This is what i now try

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

  }
}

This is how i show the table

<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>

Expected result: 1,3,4

Upvotes: 4

Views: 7985

Answers (2)

josemartindev
josemartindev

Reputation: 1426

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'));

Demo here

Upvotes: 5

Onesinus Saut
Onesinus Saut

Reputation: 344

Acording to @jose answer i've implemented to hook concept with this code

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

Then in function we can add 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

  }
}

So when we display {enty}

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

We got value merged in string format

https://ibb.co/nQFK1C4

Thanks.

Upvotes: 1

Related Questions