React rendering html table and reading from html table
<p>This is a conceptual question in that I'm trying to understand the best way to handle tabular data in react without using any special component or library.  </p>

<p>I have data in a html table created dynamically in my child component.  The data comes from the parent component.  Some of the columns have editable content that I trigger with an edit button to re-render a version of the table that has inline text boxes for all rows of the columns that are editable.  </p>

<p>When I change the content of the text box, I want to be able to click on my save button and have all the rows get saved.  </p>

<p>The save and edit buttons are not inline on the table, but just sit outside the table in my component.  </p>

<p>How do I access the html table in my child component from the the parent component to read all the rows and save the values in the textboxes to a data store?</p>

<p>Here is a snippet of code where I'm attempting to build the select list dynamically.  I'm having trouble with some syntax errors and it is not working, but it gives an idea of what I'm trying to do.</p>

<p>I'm passing in the category and the transaction id.  I want to add the select list to each category cell in every row in my table when the edit mode is selected.  The transaction id is my solution for having the index of the current row available on the list by adding 1 to the transaction id.  I will then use the selected index - 1 to get the transaction id for updating the corresponding records category.  This may be a hack, but I can't think of the right way or better way to link the transaction to the select list.</p>

<pre><code>renderCategory(category,transid){

    console.log(category);

    if (this.props.editMode === true){

    return  &lt;div&gt;
        &lt;select id="selCategory" onChange={this.props.onCategoryChange}&gt;

  const arrCategory = ["Category1","Category1","Category2","Category3","Category4","Category5","Category6","Category7"];

          var i;

          for (i = 1;arrCategory.length+1;i++){

            &lt;option value={transid+1}&gt;{arrCategory[i-1]}&lt;/option&gt;

            if(arrCategory[i-1] === category) {
              selectedIndex = i-1;
            }
          }
        &lt;/select&gt;
      &lt;/div&gt;
    }
    else {
      return category
    }
  }
</code></pre>

<p>Here I have the code in the parent for handling the onChange event of the select list in my child.</p>

<pre><code>  handleCategoryChange(e) {

         // this will have to be changed because I'm using the index value to store the transaction id

        alert("The Child HTML is: " + e.target.innerHTML + "The selected value is: " + e.target.options[e.target.selectedIndex].value); 


        //// update the date which is in parent state to reflect the new value for category for the passed in transaction id (the problem is I don't know what the transaction id is...)

      }
</code></pre>