title: React - how can I get updated data to show in my table?
body: <p>I need to be able to update the values in my table rows and then have those new values show in the cells. How would I go about doing this? </p>
  
  <p>Here is the code I am currently working with:</p>
  
  <p>Main Table Component</p>
  
  <pre><code>import React from 'react';
  import TableWithDataHeader from './TableWithDataHeader.jsx';
  import TableWithDataBody from './TableWithDataBody.jsx';
  import TableWithDataRowForm from './TableWithDataRowForm.jsx';
  import {updateRowHistory} from '../../actions/DALIActions';
  import AppStore from '../../stores/AppStore';
  
  export default class TableWithData extends React.Component {
      state = {rows: [], isEditing: false, input: null};
      updateState = () =&gt; {
          let rows = this.state.rows;
          rows.shift();
          rows.push({id: AppStore.getRowId(), cells: AppStore.getUpdatedCells()});
          this.setState({rows});
          console.log(rows);
      };
  
      componentDidMount() {
          let rows = this.state.rows;
          rows.push({id: AppStore.getRowId(), cells: AppStore.getCells().historycells});
          this.setState({rows});
          console.log(rows);
          AppStore.addChangeListener(this.updateState);
      }
  
      handleEdit = (row) =&gt; {
          this.setState({isEditing: true});
      };
  
      handleInputChange = (newCellValuesArray) =&gt; {
          let input = this.state.input;
          input = newCellValuesArray;
          this.setState({input});
      };
  
      editStop = (row) =&gt; {
          this.setState({isEditing: false});
      };
  
      handleSubmit = (access_token, row_id) =&gt; {
          let newCellValuesArray = this.state.input;
          updateRowHistory(access_token, row_id, newCellValuesArray);
          this.setState({isEditing: false});
      };
  
      componentWillUnmount() {
          AppStore.removeChangeListener(this.updateState);
      }
  
      render() {
  
          let {rows, isEditing, input} = this.state;
  
          console.log(rows);
          console.log(rows.map(row =&gt; {
              return row.cells;
          }));
  
          return (
              &lt;div&gt;
                  &lt;div className="row"&gt;
                      &lt;table className="table table-striped"&gt;
                          &lt;thead&gt;
                              &lt;TableWithDataHeader /&gt;
                          &lt;/thead&gt;
                          &lt;tbody&gt;
                              {rows.map(row =&gt; this.state.isEditing ? 
                                  &lt;TableWithDataRowForm key={row.id} cells={row.cells} editStop={this.editStop.bind(null, row)} handleSubmit={this.handleSubmit.bind(this)} handleInputChange={this.handleInputChange.bind(this)} /&gt; : 
                                  &lt;TableWithDataBody key={row.id} cells={row.cells} handleEdit={this.handleEdit.bind(null, row)} /&gt;
                              )}
                          &lt;/tbody&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>Edit Row Component</p>
  
  <pre><code>import React from 'react';
  import AppStore from '../../stores/AppStore';
  
  export default class TableWithDataRowForm extends React.Component {
      state = {cells: this.props.cells, newCellValues: []};
  
      onChange(e) {
          let newCellValues = this.state.newCellValues;
          newCellValues[e.target.id] = e.target.value;
          this.setState({newCellValues});
          console.log(newCellValues);
          let newCellValuesArray = [];
          for (let key in newCellValues) {
              if (newCellValues.hasOwnProperty(key)) {
                  newCellValuesArray.push({contents: newCellValues[key]});
              }
          }
          console.log(newCellValuesArray);
          this.props.handleInputChange(newCellValuesArray);
      }
  
      editStop() {
          this.props.editStop();
      }
  
      handleSubmit(e) {
          e.preventDefault();
  
          let access_token = AppStore.getToken();
          let row_id = AppStore.getRowId();
  
          this.props.handleSubmit(access_token, row_id);
      }
  
      render() {
  
          let {cells, newCellValues} = this.state;
  
          return (
              &lt;tr&gt;
                  {cells.map(cell =&gt; {
                      return &lt;td key={cell.id} className="text-center"&gt;&lt;input type="text" className="form-control" id={cell.id} defaultValue={cell.contents} onChange={this.onChange.bind(this)} /&gt;&lt;/td&gt;
                  })}
                  &lt;td&gt;
                      &lt;button className="btn btn-default"&gt;&lt;i className="fa fa-ban" onClick={this.editStop.bind(this)}&gt;&lt;/i&gt;Cancel&lt;/button&gt;
                      &lt;button className="btn btn-success"&gt;&lt;i className="fa fa-cloud" onClick={this.handleSubmit.bind(this)}&gt;&lt;/i&gt;Save&lt;/button&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          );
      }
  }
  </code></pre>
  
  <p>It's it bit mangled at the moment, but I think that you can get the general idea of what I am attempting! So, I can get the table to initially render with data values from my store and I can successfully edit them to different values. However, I would like it so that when I click my save button the new values show. I am using React with flux to build this.</p>
  
  <p>Answers with examples are always much appreciated</p>
  
  <p>Thanks for your time</p>