Search code examples
javascriptarraysreactjsreact-bootstrap-table

Capture data from editable Bootstrap table into array


I have a bootstrap table set up (using react-bootstrap-table-next) that will allow a user to edit the cells and input desired values. Once they are finished, I would like for them to click a "Submit" button and save the values of a table (which I will then POST to an API).

I haven't been successful in thinking about how to go about saving the data into an array. Thoughts?


Solution

  • Turns out the answer is easier than expected. The array that is used to create the table is automatically updated to reflect the changes made by the user. Thus, the only thing you need to do is deep clone your data beforehand so that you have the original data and the updated data. Then you can determine which to keep moving forward with.

    To get a deep clone and not just another alias for the same array:

    const arrayToRemainUnedited = JSON.parse(JSON.stringify(arrayUsedToBuildTable))