Save submitted form values in a JSON file using React

Question

I'm trying to create a form in react which will update a JSON file with the values in the form upon submit. (The endgame is that this will create an array of data in the JSON file each time the form is submitted which can then be used to populate a "list" of the submitted results elsewhere in the app)

The form itself works OK but every time I press submit I get the error: "TypeError: fs.writeFile is not a function"

import React, { Component } from "react";
import { Form, Button } from 'semantic-ui-react';
import jsonfile from'jsonfile';

var file = 'data.json'

var obj = {name: 'JP'}


export default class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      name: "",
      email: ""
    }

    this.handleChange = this.handleChange.bind(this);
    this.sendDataSomewhere = this.sendDataSomewhere.bind(this);
}


handleChange = (e, {name, value}) => {
  this.setState({[name]: value})
}

sendDataSomewhere = function jsonfile(file){
jsonfile.writeFile(file, obj, function (err) {
  console.error(err);
});
};

  render() {
    return (
     <div>
      <Form onSubmit={this.sendDataSomewhere}>
        <Form.Field>
          <Form.Input name="name" value={this.state.name} onChange={this.handleChange}/>
        </Form.Field>
        <Form.Field>
          <Form.Input name="email" value={this.state.email} onChange={this.handleChange}/>
        </Form.Field>
        <Button type="submit">Submit</Button>
       </Form>
     </div>
    );
  }
}

If anyone could let me know what I'm doing wrong or provide an example of something similar I would greatly appreciate it.

Thanks

Answer 1

Client-side solution is:

const handleSaveToPC = (jsonData,filename) => {
  const fileData = JSON.stringify(jsonData);
  const blob = new Blob([fileData], {type: "text/plain"});
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.download = `${filename}.json`;
  link.href = url;
  link.click();
}

Answer 2

FS is not accessible in the client

This is not possible to write to a file in the client.

You must submit to an endpoint, for example a Node server. There you can use the node module fs. This will let you write the data to a file.

The reason it is not possible to write to a file in the client is because of security reasons.

Alternate solution

If you need to aggregate post data over time you can do a couple of things in react. First, you can use a state management system, like Redux or the context api and hooks. That will keep your data as you move throughout the app. You will lose data if you hard refresh though.

The second step is to add local storage and a way to "Hydrate" your app. That way the data will be safe until the app cache is removed.

This solution is much more preferable to writing Blobs and downloading them in the client.