How to add the ability to pass json to a react application, and then overwrite it with the same application (save this file locally)?

Question

JavaScript

Let's say I would like to receive json in this code, and overwrite it (keep updated data). As done in the code, unfortunately, it will not work due to the fact that fs is not included in the react application. How can it be implemented?

import React from 'react';
import './App.css';

// components 
import Sidebar from './components/Sidebar/Sidebar.js'


// data
let webComponents = require('./data/web-components.json');

fs = require('fs');

fs.appendFile('file', 'path to file');



class App extends React.Component {

  constructor() {
    super();
  }
 
  render() {
     return (
        <div className='App'>
          <Sidebar items={webComponents} />
        </div>
      );
  }
}

export default App;

Answer 1

The react application will run on the client machine. No files can be read/written on the client machine. The scheme can be like this: a react application sends a request to the backend -> the backend reads data from the file and sends it to the client application -> the data in the client application changes and is sent back to the backend -> the backend writes the file with new data.
Or use localStorage , but then the json data will be different for each machine.