title: How do I update a react-bootstrap-table2 cell value after it's edited so a button component in a different column has it?
body: <p>I've setup a react-bootstrap-table2 (aka react-bootstrap-table-next) table like this:</p>
  
  <pre><code>function buttonFormatter(cell, row) {
    return (
      &lt;NominateButton
        row={ row }
        auctionId={ auctionId }
        teamId={ teamId }
      /&gt;
    );
  }
  
  const queue_columns = [{
    dataField: 'player.num',
    text: 'Player Num',
    editable: false
  }, {
    dataField: 'player.name',
    text: 'Player',
    editable: false
  }, {
    dataField: 'player.position',
    text: 'Position',
    editable: false
  }, {
    dataField: 'initialBid',
    text: 'Initial Bid',
  }, {
    text: 'Nominate',
    formatter: buttonFormatter,
    editable: false
  }];
  
  return (
    &lt;BootstrapTable
      bootstrap4={ true }
      keyField='player.num'
      data={ this.state.data }
      columns={ queue_columns }
      cellEdit={ cellEditFactory({ mode: 'click',
                                   blurToSave: true }) }
      striped
      hover /&gt;
  );
  </code></pre>
  
  <p>Here's what the table looks like:
  <a href="https://i.stack.imgur.com/INvby.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/INvby.png" alt="enter image description here"></a></p>
  
  <p>The problem is that the row object is passed into the NominateButton component when the table is created, so when the initialBid column is updated that updated value is not updated in the row property to the NominateButton for that row. The NominateButton uses that initialBid value in a GraphQL mutation.</p>
  
  <p>After an Initial Bid cell in a row is edited and changed, how do I somehow update the state of the NominateButton with that changed value?</p>
  
  <p>Is there some way to specify a function name in the call to cellEditFactory (with the afterSaveCell key) and pass that function name as a property into NominateButton?</p>