title: How to save dynamic content of a table?
body: <p>I am trying to save dynamically displayed data in a table after a filter and I am not able to save it in some array and keep it there for use in the next step.</p>
  <p>In the beginning, the user is able to upload an excel file in the agreed format, I take the data from it and prepare an array with all the detail as you can see here:</p>
  <pre><code> const readUploadFile = (e) =&gt; {
      e.preventDefault();
      if (e.target.files) {
        const reader = new FileReader();
        reader.onload = (e) =&gt; {
          const data = e.target.result;
          const workbook = xlsx.read(data, { type: 'array' });
          const sheetName = workbook.SheetNames[0];
          const worksheet = workbook.Sheets[sheetName];
          const json = xlsx.utils.sheet_to_json(worksheet);
          setCsvArray(json);
        };
        reader.readAsArrayBuffer(e.target.files[0]);
      }
    };
  </code></pre>
  <p>With this array prepare a table to view the content of the file in the frontend and for fill, the rest of the table consult the database to filter the information (in the database we handle the scale of numbers for suppliers) depending on the country and the product.</p>
  <p>This is the piece of code that I'm using to render two different components depending on the editNumberRow to be able to modify the content of the lists</p>
  <pre><code>&lt;Fragment&gt;
    {editNumberRow === item.number ? (
      &lt;EditableUploaderRow
      item={item}
      countryWise={countryWise}
      handleCancelClick={handleCancelClick}
      gvnotype={gvnotype}
      /&gt;
      ) : (
        &lt;ReadOnlyUploaderRow
        item={item}
        handleDropdownDisable={handleDropdownDisable}
        countryWise={countryWise}
        gvnotype={gvnotype}
      /&gt;
    )}
  &lt;/Fragment&gt;
  </code></pre>
  <p>In the ReadOnlyUploaderRow, I am using a function(position, country) that filters the database of suppliers and returns a name depending on those values.</p>
  <p><code>ex: function elements(0, Italy) ---&gt; Pizza</code></p>
  <p>In the function, I make a filter with the database and I give the suppliers that are better positioned in our scale, obtaining in each of the rendered columns different suppliers.</p>
  <p>Then to render the different suppliers in the table I do the following:</p>
  <pre><code>&lt;td&gt;elements(0, ${country})&lt;/td&gt;
  &lt;td&gt;elements(1, ${country})&lt;/td&gt;
  &lt;td&gt;elements(2, ${country})&lt;/td&gt;
  &lt;td&gt;elements(3, ${country})&lt;/td&gt;
  &lt;td&gt;elements(4, ${country})&lt;/td&gt;
  &lt;td&gt;
    &lt;button
      className=&quot;btn btn-sm btn-primary&quot;
        onClick={(event) =&gt; handleDropdownDisable(event, item)}
    &gt;
      Choose Manually
    &lt;/button&gt;
  &lt;/td&gt;
  </code></pre>
  <p>If you press &quot;Choose Manually&quot; the state changes and the component that renders the row will now be EditableUploaderRow:</p>
  <pre><code>&lt;td&gt;
          &lt;select
            className=&quot;form-select fileUploader__dropdownWidth&quot;
            defaultValue={list[0] ? list[0].name_abbr : null}
          &gt;
            {list.map((item3, key) =&gt; (
              &lt;option value={item3.name_abbr} key={key}&gt;
                {item3.name_abbr}
              &lt;/option&gt;
            ))}
          &lt;/select&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;select
            className=&quot;form-select fileUploader__dropdownWidth&quot;
            defaultValue={list[1] ? list[1].name_abbr : null}
          &gt;
            {list.map((item3, key) =&gt; (
              &lt;option value={item3.name_abbr} key={key}&gt;
                {item3.name_abbr}
              &lt;/option&gt;
            ))}
          &lt;/select&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;select
            className=&quot;form-select fileUploader__dropdownWidth&quot;
            defaultValue={list[2] ? list[2].name_abbr : null}
          &gt;
            {list.map((item3, key) =&gt; (
              &lt;option value={item3.name_abbr} key={key}&gt;
                {item3.name_abbr}
              &lt;/option&gt;
            ))}
          &lt;/select&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;select
            className=&quot;form-select fileUploader__dropdownWidth&quot;
            defaultValue={list[3] ? list[3].name_abbr : null}
          &gt;
            {list.map((item3, key) =&gt; (
              &lt;option value={item3.name_abbr} key={key}&gt;
                {item3.name_abbr}
              &lt;/option&gt;
            ))}
          &lt;/select&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;select
            className=&quot;form-select fileUploader__dropdownWidth&quot;
            defaultValue={list[4] ? list[4].name_abbr : null}
          &gt;
            {list.map((item3, key) =&gt; (
              &lt;option value={item3.name_abbr} key={key}&gt;
                {item3.name_abbr}
              &lt;/option&gt;
            ))}
          &lt;/select&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;button type=&quot;submit&quot; className=&quot;btn btn-primary btn-sm&quot;&gt;
            Save
          &lt;/button&gt;
          &lt;button
            onClick={handleCancelClick}
            className=&quot;btn btn-secondary btn-sm&quot;
          &gt;
            Cancel
          &lt;/button&gt;
        &lt;/td&gt;
  </code></pre>
  <p>This renders the list of the row depending on the country in that row with this:</p>
  <pre><code>let list = countryWise
      .filter((item2) =&gt; item2.country === item.country)
      .sort(compare);
  </code></pre>
  <p>Now you can see the compare function for better understanding:</p>
  <pre><code>const compare = (a, b) =&gt; {
      if (gvnotype === 'BB') {
        if (a.BB &lt; b.BB) {
          return 1;
        }
        if (a.BB &gt; b.BB) {
          return -1;
        }
        return 0;
      }
  
      if (gvnotype === 'XC') {
        if (a.XC &lt; b.XC) {
          return 1;
        }
        if (a.XC &gt; b.XC) {
          return -1;
        }
        return 0;
      }
  
      if (gvnotype === 'MS') {
        if (item.product === 'XC') {
          if (a.XC &lt; b.XC) {
            return 1;
          }
          if (a.XC &gt; b.XC) {
            return -1;
          }
          return 0;
        }
  
        if (item.product === 'BB') {
          if (a.BB &lt; b.BB) {
            return 1;
          }
          if (a.BB &gt; b.BB) {
            return -1;
          }
          return 0;
        }
      }
      if (a.DL &lt; b.DL) {
        return 1;
      }
      if (a.DL &gt; b.DL) {
        return -1;
      }
      return 0;
    };
  </code></pre>
  <p>I want to be able to persist the data in one place and be able to edit it with my editable component and with the save button change the last version and send it to the read component.</p>