How do I create a dynamic React table that also manipulates a dynamic JSON file?

Question

I have seen a lot of examples and tutorials for dynamic React tables, and also examples that import JSON data into a react table, but I have not yet found one that dynamically changes a React table and a JSON file.

I am basing my code off this one ( https://codesandbox.io/s/k9r9692m77 ), which is the accepted answer to a StackOverflow post ( Add and remove data to table - React )

I would like to be able to submit data through the UI with a "submit" button like the one in the example, and that data be displayed in a UI table, but I would also like the data that is added to the table to also be added to a JSON file.

Example:

There are two fields, one for the USER and one for EMAIL , so for two entries I would get a table like the one below:

|------------------|-------------------|------------------|
|       USER       |      EMAIL        |       Actions    |
|   Bennie Factor  | bennie@factor.com |       Delete     |
|   Horace Cope    | horace@cope.com   |       Delete     |     
|------------------|-------------------|------------------|

Which would then produce a JSON that looks something like:

{"data": [
    {"name": "Bennie Factor", "email": "bennie@factor.com"},
    {"name": "Horace Cope", "email": “horace@cope.com"}
]}

If I then added the user Jay Walker with an email of jay@walker.com and clicked submit, the new table and json would be:

|------------------|-------------------|------------------|
|       USER       |      EMAIL        |       Actions    |
|   Bennie Factor  | bennie@factor.com |       Delete     |
|   Horace Cope    | horace@cope.com   |       Delete     |
|   Jay Walker     | jay@walker.com    |       Delete     |     
|------------------|-------------------|------------------|

And:

 {"data": [
    {"name": "Bennie Factor", "email": "bennie@factor.com"},
    {"name": "Horace Cope", "email": “horace@cope.com"},
    {"name": "Jay Walker", "email": “jay@walker.com"}
]}

The process would be:

1. You type data into the relevant boxes
2. Click submit and that data is then displayed in a table, and also appended to a JSON file

I would also like the ability to delete the entry from the JSON file through the UI table. Basically anything that can happen to the UI table will also happen in the JSON (eg adding an entry to a UI table will then add the same data to a JSON, and removing an entry from the UI table will also remove the same entry from the table).

Please let me know if more information is needed to clarify my question.

Answer 1

Everything happens in JS is stored in memory by default, as opposed to written to some "file" on disk. For security reason web browsers normally don't have write access to users' local disk unless explicitly granted by user interaction .

You can allow user to download those data in memory to a .json file on disk by clicking a button. The trick is to generate a dataURI link on the fly:

class App extends Component {

  // ...

  saveAsFile() {
    const str = JSON.stringify(this.state.people);
    const dataUri = "data:text/json," + str;
    const link = document.createElement("a");
    link.download = "table.json";
    link.href = dataUri;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }

  render() {
    return (
      <div>
        ...
        <button onClick={this.saveAsFile.bind(this)}>download</button>
      </div>
    )
  }
}

Demo: https://codesandbox.io/s/async-cherry-0tke6

Another option is to use the Native File System API . But I won't dive into it here since it's still experimental and not a web standard.