title: React - mapping data to rows that are formed during a map function
body: <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>