React - how can I get updated data to show in my table?
<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>