Don't rerender when data is changed.

[danijel2017]

Hello.

Really I can't understand why did not rerender table when data is changed. I added my code in the follow. Really data is updated correctly but table is not rerender. Please teach me if you know this. Thanks.

`import React, { Component } from "react"; import { Link } from "react-router-dom"; import { connect } from "react-redux"; import moment from "moment"; import { BootstrapTable, TableHeaderColumn } from "react-bootstrap-table"; import "../../node_modules/react-bootstrap-table/dist/react-bootstrap-table-all.min.css"; import DatePicker from "./DatePicker"; import Dropdown from "./Dropdown"; import NotesModal from "./NotesModal"; import { updateFile } from "../Actions/FileActions";

class TascAdminTable extends Component { state = { focused: false, data: this.props.data };

componentWillReceiveProps(nextProps) { this.setState({ data: nextProps.data }) }

renderFileDetails = (cell, row) => ( <Link to={details/${row.index}}>{row.fileNumber}</Link> );

renderDatePicker = (cell, row) => { if(row.index == 45) console.log('estClosingDate: ', row.estClosingDate, ' loanStatus: ', row.loanStatus); return ( <DatePicker file={row} /> ) };

renderLoanStatus = (cell, row, formatExtraData, rowIdx) => <Dropdown updateField={this.updateField.bind(this)} file={row} fileIdx={rowIdx} field="loanStatus" />;

renderHoaStatus = (cell, row, formatExtraData, rowIdx) => <Dropdown updateField={this.updateField.bind(this)} file={row} fileIdx={rowIdx} field="hoaStatus" />;

renderNotes = (cell, row) => <NotesModal file={row} />;

updateField(rowIdx, field, value) {

let file = this.state.data[rowIdx];
file[field] = value;
this.setState({ data: this.state.data });

const user =  this.props.user;
const payload = {
  entityId: user.entityId,

  fileNumber: file.fileNumber,
  role: file.role,
  agent: file.agent,
  estClosingDate: file.estClosingDate !== null && file.estClosingDate !== "null" ? moment(file.estClosingDate) : null,
  loanStatus: file.loanStatus,
  hoaStatus: file.hoaStatus,
  notes: file.notes,

  focused: false
};

//console.log('updateField: file: loanStatus:', file['loanStatus'], 'hoaStatus:', file['hoaStatus'], payload);
this.props.updateFile(payload);

}

render() { console.log('updated admin') return ( <BootstrapTable ref="table" data={this.props.data} pagination options={this.props.options} bordered={false} striped containerStyle={{ fontSize: ".8em" }} > <TableHeaderColumn dataField="created" dataSort={true} width="10%"> Created </TableHeaderColumn> <TableHeaderColumn dataField="fid" isKey dataSort={true} dataFormat={this.renderFileDetails} width="10%" > File Number </TableHeaderColumn> <TableHeaderColumn dataField="roleType" dataSort={true} width="9%"> Role </TableHeaderColumn> <TableHeaderColumn dataField="lname" dataSort={true} width="9%"> Last Name </TableHeaderColumn> <TableHeaderColumn dataField="address" dataSort={true} width="12%"> Property Address </TableHeaderColumn> <TableHeaderColumn dataField="status" dataSort={true} width="10%"> preDOCS Status </TableHeaderColumn> <TableHeaderColumn dataField="estClosingDate" dataSort={true} width="10%" dataFormat={this.renderDatePicker} > Est. Closing Date </TableHeaderColumn> <TableHeaderColumn dataField="loanStatus" dataSort={true} width="10%" dataFormat={this.renderLoanStatus} > Loan Payoff Status </TableHeaderColumn> <TableHeaderColumn dataField="hoaStatus" dataSort={true} width="10%" dataFormat={this.renderHoaStatus} > HOA Payoff Status </TableHeaderColumn> <TableHeaderColumn dataField="notes" width="10%" dataFormat={this.renderNotes} > Notes </TableHeaderColumn> </BootstrapTable> ); } }

function mapStateToProps(state) { return { user: state.user }; }

export default connect( mapStateToProps, { updateFile } )(TascAdminTable); `