Rtable.js

import * as edit from 'react-edit';

class MyTable extends React.Component{
  constructor(props){
    super(props)
    this.state={
      editedCell:null,
      rows:[],
      columns:[],
      title: props.title
    }
  }
  componentWillReceiveProps(nextProps){
    let {rows,columns,changer} = nextProps
    let editable = edit.edit({      
      isEditing: ({ columnIndex, rowData  }) => columnIndex === rowData.editing,
      onActivate: ({ columnIndex, rowData  }) => {
        const index = findIndex(this.state.rows, { id: rowData.id  });
        const rows = cloneDeep(this.state.rows);
        rows[index].editing = columnIndex;
        console.log('onactivate ', this.state.title) // => onactivate TableA/B (both work)
        this.setState({ rows  });
        // HEre this is correctly pointing to the expected Component instance
      },
      onValue : () =>{
        console.log('onvalue ', this.state.title)  // => onvalue TableB always
        // <---------PROBLEM HERE
        // `this` is always pointing to the second TableB, never TableA
        
        
        // Ideally I would dispatch the action here plus modify state etc.
      }
    })
    // Setting cells to be editable inputs when props are received
    let muloc = columns.map((el,ind)=>{
      el['cell'] = {}
      el['cell']['transforms'] = [editable(edit.input()) ]
      return el
    })
    this.setState({rows,columns: muloc})      
  }
  render(){
    let {rows,columns} =this.state
    return(
      <Table.Provider columns={columns}>
      <Table.Header />
      <Table.Body rows={rows} rowKey="id" />
      </Table.Provider>
    );
  }
}



// Render two tables accessing different parts of the Redux State
class App extends React.Component{  // Connected Component to the Redux Store
  constructor(props){
    super(props)
  }
  componentWillMount(){
    this.props.initStore();
  }
  render(){
    let dataA = this.props.subStateA // mapped Redux state to props
    let dataB = this.props.subStateB
    return(
      <div id='mytables'>
        <Tatata changer={/*action that dispatches */} title={'TableA'} columns={dataA.columns} rows={dataA.rows} />
        <br />
        <Tatata changer={/*action that dispatches */} title={'TableB'} columns={dataB.colums} rows={dataB.rows} />
      </div>
    )
  }
}