how add and remove values from grid to another grid

import React, {Component, PropTypes} from 'react';
import {Button, ButtonGroup} from 'react-bootstrap';
import update from 'react-addons-update';
import {VerticalLayout, HorizontalLayout,DataGrid,DynamicDataGrid,Icon,ResizableModal,AutoResizeComponent,DepartmentDropdown,FlexPanel,FixedPanel,DraggableCell} from 'ssc-cdt3';
import {connectCdtDataComponent} from 'ssc-cdt3';

const leftColConfig = [
{
dataKey: 'CLIENT_NAME',
label: 'Client Name',
width: 200,
dataType: 'string'
}
];

const rightColConfig = [
{
dataKey: 'CLIENT_NAME',
label: 'Visible Columns',
width: '*',
dataType: 'string',
sort: false,
menu: false,
cell: DraggableCell
}
];

export default class ClientSelector extends Component {

static propTypes = {
gridState: PropTypes.object.isRequired,
onChange: PropTypes.func.isRequired,

};

constructor(props) {
super(props);
this.leftSelected = [];
this.rightSelected = [];
this.state = this.getState();
this.state = { showModal: false};

}



getState(props) {
const {gridState} = this.props;
// const {columns} = gridState;
const locked = leftColConfig.filter(col => !col.hidden && !col.locked);
const visible = leftColConfig.filter(col => !col.hidden && !col.locked);
const hidden = leftColConfig.filter(col => col.hidden && !col.locked);
return {visible, hidden, locked};
}

componentWillReceiveProps(props) {
this.setState((this.getState(props)));


console.log(props+"clientselector props")

console.log(Object.keys(props))

}

moveRight = () => {
let {visible, hidden} = this.state;
hidden = hidden.filter(item => this.leftSelected.indexOf(item) === -1);
visible = visible.concat(this.leftSelected);
this.setState({hidden, visible}, this.getColumnsForGrid);
}

moveLeft = () => {
let {visible, hidden} = this.state;
visible = visible.filter(item => this.rightSelected.indexOf(item) === -1);
hidden = hidden.concat(this.rightSelected);
this.setState({hidden, visible}, this.getColumnsForGrid);
}

leftSelectionChange = (colArray) => {
this.leftSelected = colArray;
}

rightSelectionChange = (colArray) => {
this.rightSelected = colArray;
}

getColumnsForGrid = () => {
//const {onChange} = this.props;
let {visible, hidden} = this.state;
const {locked} = this.state;
const columns = hidden.map(x => {return {...x, hidden: true, index: -1};}).concat(locked).concat(visible.map((col, index) => {
return {...col, hidden: false, index};
}));
onChange=({...this.props, columns});

// remove selected flags
visible = visible.map(x => { return {...x, __state__: null}; });
hidden = hidden.map(x => { return {...x, __state__: null}; });
this.setState({visible, hidden});
this.rightSelected = [];
this.leftSelected = [];
}

open = () => {
this.setState({ showModal: true });
}

close = () => {
this.setState({ showModal: false });
}

connectCallback = (actions) => {
actions.loadList();
}
render() {
const {visible, hidden} = this.state;

return (

The issue provides only an inline ClientSelector component using DynamicDataGrid and DataGrid; no repository file or test is named. Start by tracing moveRight, moveLeft, and the grid selection callbacks, then verify how the two grids should exchange values and how onChange is expected to report completion.

Written by the indexing model from the issue text.