React - mapping data to rows that are formed during a map function
<p>I have a component called Cells which renders with data that is gotten from a flux store. My problem is that I want to render this data to a specific row but because of the way I am rendering the rows (they are dynamic so you can add them to the table), I am struggling to give the rows identifiers which the cell component can render into. I hope that makes sense!</p>

<p>Here is the code:</p>

<p>Cells Component:</p>

<pre><code>import React from 'react';

export default class Cells extends React.Component {
    render() {
        return (
            &lt;td&gt;{this.props.value}&lt;/td&gt;
        );
    }
}
</code></pre>

<p>Table Component:</p>

<pre><code>    import React from 'react';
    import TableHeader from './TableHeader.jsx';
    import Cells from './Cells.jsx';
    import RowForm from './RowForm.jsx';
    import {createRow} from '../../actions/DALIActions';
    import AppStore from '../../stores/AppStore';

    export default class Table extends React.Component {
        state = {rows: [], cellValues: [], isNew: false, isEditing: false};
        updateState = () =&gt; this.setState({cellValues: AppStore.getCellValues()});

        componentWillMount() {
            AppStore.addChangeListener(this.updateState);
        }

        handleAddRowClickEvent = () =&gt; {
            let rows = this.state.rows;
            rows.push({isNew: true});
            this.setState({rows: rows});
        };

        handleEdit = (row) =&gt; {
            this.setState({isEditing: true});
        };

        editStop = () =&gt; {
            this.setState({isEditing: false});
        };

        handleSubmit = (access_token, id, dataEntriesArray) =&gt; {
            createRow(access_token, id, dataEntriesArray);
        };

        componentWillUnmount() {
            AppStore.removeChangeListener(this.updateState);
        }

        render() {

            let {rows, cellValues, isNew, isEditing} = this.state;

            let headerArray = AppStore.getTable().columns;

            let cells = this.state.cellValues.map((value, index) =&gt; {
                return (
                    &lt;Cells key={index} value={value.contents} /&gt;
                );
            });

            return (
                &lt;div&gt;
                    &lt;div className="row" id="table-row"&gt;
                        &lt;table className="table table-striped"&gt;
                            &lt;thead&gt;
                                &lt;TableHeader /&gt;
                            &lt;/thead&gt;
                            &lt;tbody&gt;
//////////// This is where the render of the data would happen/////////////
                                {rows.map((row, index) =&gt; this.state.isEditing ?
                                    &lt;RowForm formKey={index} key={index} editStop={this.editStop} handleSubmit={this.handleSubmit} /&gt; :
                                    &lt;tr key={index}&gt;
                                        {this.state.cellValues ? cells : null}
                                        &lt;td&gt;
                                            &lt;button className="btn btn-primary" onClick={this.handleEdit.bind(this, row)}&gt;&lt;i className="fa fa-pencil"&gt;&lt;/i&gt;Edit&lt;/button&gt;
                                        &lt;/td&gt;
                                    &lt;/tr&gt;
                                )} 
                   ///////////////End/////////////////
                            &lt;/tbody&gt;
                        &lt;/table&gt;
                    &lt;/div&gt;
                    &lt;div className="row"&gt;
                        &lt;div className="col-xs-12 de-button"&gt;
                            &lt;button type="button" className="btn btn-success" onClick={this.handleAddRowClickEvent}&gt;Add Row&lt;/button&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            );
        }
    }
</code></pre>

<p>I know this isn't probably the best way to achieve what I want (any tips on that would be appreciated as well), but its what I have to work with at the moment!</p>

<p>Any help would be much appreciated, especially examples!</p>

<p>Thanks for you time!</p>