title: How to save changes made in json file in react typescript
body: <p>I am new on react and typescript so it's practice project.
  in which I am saving username and password in json file.
  and added two static user details.
  now when I am registering new user manipulate the file. and let me login with that same username and password.
  but when I refresh page that user details get lost. <strong>[Means file is not getting saved after manipulation ]</strong></p>
  <p>FILE : APP.tsx</p>
  <pre><code>import * as React from 'react';
  import './App.css';
  import Login from './login';
  import Register from './register';
  import List from './list';
  
  
  class Authenticate extends React.Component&lt;any,any&gt;{
    constructor(props:any){
      super(props);
      this.state={
        newUser:false,
        displayButtonText:&quot;New On This Portal..!&quot;,
        displayForm:true,
        userList:''
      }
    }
  
    changeButton=()=&gt;{
      var userType:Boolean=!this.state.newUser;
      var buttonText:String=(userType)?&quot;Existing User..!&quot; : &quot;New On This Protal..!&quot;
      this.setState({newUser:userType,displayButtonText:buttonText})
    }
  
    chnageUserType=()=&gt;{
      this.changeButton();  
      this.setState({
        newUser:true
      })
    }
  
    getUsers=()=&gt;{
      const provider={
          method:'GET',
          header:{'Content-Type':'Application/json'}
      }
  
      fetch(&quot;https://reqres.in/api/users?page=2&quot;,provider)
      .then(response=&gt;response.json())
      .then(data=&gt; this.setState({ userList: data.data,displayForm:false }));   
    }
  
    render(){
      return (
        &lt;div className=&quot;main&quot;&gt;
          {
              (!this.state.displayForm)?
                  &lt;div&gt;
                      &lt;h2 style={{marginBottom:&quot;none !important&quot;}}&gt;This is the list of people Registered on my Protal&lt;/h2&gt;
                      &lt;List Content={this.state.userList} /&gt;
                  &lt;/div&gt;
              :
              &lt;div&gt;
                  &lt;h2 style={{marginBottom:&quot;none !important&quot;}}&gt;Welcome To My Testing Portal &lt;/h2&gt;
                  {(this.state.newUser)?&lt;Register /&gt;:&lt;Login UserManager={this.chnageUserType} showUserList={this.getUsers}/&gt;}
                  &lt;button className=&quot;newButton&quot; onClick={this.changeButton}&gt;&lt;u&gt;{this.state.displayButtonText}&lt;/u&gt;&lt;/button&gt;
              &lt;/div&gt;
          }      
          
        &lt;/div&gt;
      );
    }
  }
  
  export default Authenticate;
  </code></pre>
  <p>File login.tsx</p>
  <pre><code>import React from 'react';
  import './App.css';
  import InputBox from './inputBox';
  import Users from './users.json'
  import Labels from './labels';
  import { confirmAlert } from 'react-confirm-alert';
  import 'react-confirm-alert/src/react-confirm-alert.css';
  
  class Login extends React.Component&lt;any,any&gt;{
  
      constructor(props:any){
          super(props);
          this.state={
              username:'',
              password:'',
              users:Users,
              errors:{
                  value:false,
                  errorMessage:''
              },
              userList:{}
          }
      }
  
      //API PRACTICE WITH FETCH
      componentDidMount=()=&gt;{
          var data={
              method:'GET',
              header:{'Content-Type':'application/json'}
          }
          fetch(&quot;https://reqres.in/api/users?page=2&quot;,data)
          .then(Response =&gt; Response.json())
          .then(data=&gt;this.setState({userList:data.data}));
  
      }
  
      login = (event:any) =&gt;{        
          event.preventDefault();         
          if(this.state.username==='')
          {
              this.setState({
                  errors:{
                      value:true,
                      errorMessage:&quot;Username field can't be empty..!&quot;
                  }
              })
          }
          else if(this.state.password===''){
              this.setState({
                  errors:{
                      value:true,
                      errorMessage:&quot;Password field can't be empty&quot;
                  }
              })
          }
          else{
              if(this.checkUser(this.state.username,this.state.password)){
                  (this.checkUser(this.state.username,this.state.password))?alert(&quot;Welcome &quot;+ this.state.username) : alert(&quot;user not exist please register&quot;);
                  this.viewList();
              }   
              else{
                  alert(&quot;user not exist please register&quot;);
                  this.props.UserManager();
              }
          }
      }
  
      viewList=()=&gt;{
          confirmAlert({
              title: &quot;Checkout users my list&quot;,
              message:&quot;Do you want to check users on my portal&quot;,
              buttons:[
                  {
                      label:&quot;Yeah sure&quot;,
                      onClick:()=&gt;this.props.showUserList()
                  },
                  {
                      label:&quot;Not really&quot;,
                      onClick:()=&gt; alert(&quot;Alright Thank for visit. Comeback again&quot;)
                  }
              ]
          });
      }
  
      checkUser=(username:string,password:string)=&gt;{
          var i:number=0;
  
          while(i&lt;Users.length){
              if(username===Users[i].username &amp;&amp; password===Users[i].password)
                  return true;            
              i+=1;
          }
  
          return false;
      }
  
      setValue=(event:any)=&gt;{
         
          this.setState({
              [event.target.name]:event.target.value,
              errors:{
                  value:false,
                  errorMessage:''
              }
          })
      }
  
      render(){
          return(
              &lt;div className=&quot;authenticationBox&quot;&gt;
                  &lt;h3 style={{marginTop:&quot;none&quot;}}&gt;Login &lt;/h3&gt;
                  &lt;form onSubmit={this.login} className=&quot;flexBoxColumn&quot;&gt;
                      &lt;InputBox Type=&quot;text&quot; OnClick={this.setValue} Classes=&quot;inputBox&quot; Name=&quot;username&quot; PlaceHolder=&quot;Enter Username/Email&quot;/&gt;
                      &lt;InputBox Type=&quot;password&quot; OnClick={this.setValue} Classes=&quot;inputBox&quot; Name=&quot;password&quot; PlaceHolder=&quot;Enter Password&quot; /&gt;
                      {this.state.errors.value ? &lt;Labels labelName={this.state.errors.errorMessage}/&gt; : null}
                      &lt;InputBox Type=&quot;submit&quot; Classes=&quot;submitButton inputBox&quot; Value=&quot;Login&quot;/&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default Login
  </code></pre>
  <p>File: Register.tsx</p>
  <pre><code>import React from 'react';
  import './App.css'
  import InputBox from './inputBox';
  import Users from './users.json';
  import Labels from './labels';
  
  
  export default class Register extends React.Component&lt;any,any&gt;{
      constructor(props:any){
          super(props);
          this.state={
              username:'',
              password:'',
              cpassword:'',
              users:Users,
              errors:{
                  value:false,
                  errorMessage:''
              }
          }
      }
  
      registration = (event:any) =&gt;{
          event.preventDefault();         
          if(this.state.username==='')
          {
              this.setState({
                  errors:{
                      value:true,
                      errorMessage:&quot;Username field can't be empty..!&quot;
                  }
              })
          }
          else if(this.state.password===''){
              this.setState({
                  errors:{
                      value:true,
                      errorMessage:&quot;Password field can't be empty&quot;
                  }
              })
          }
          else if(this.state.cpassword===''){
              this.setState({
                  errors:{
                      value:true,
                      errorMessage:&quot;Confirm Password field can't be empty..!&quot;
                  }
              })
          }
          else{
              if(this.state.password!==this.state.cpassword)
                  alert(&quot;Password and Confirm password must be Same&quot;);
              else{
                  var fs=require(&quot;browserify-fs&quot;);
                  var user={username:this.state.username,password:this.state.password}
                  Users.push(user);
                  console.log(Users);
                  var TempUsers=JSON.stringify(Users);
  
                  fs.writeFile('./users.json', TempUsers, function() {
                      fs.readFile('./users.json', 'utf-8', function(err:any, data:any) {
                          console.log(&quot;aaaB &quot;+data);
                      });
                  });
  
                  // console.log(TempUsers);
                  // fs.writeFile(&quot;./users.json&quot;, TempUsers,function(err:any) {
                  //     if (err) throw err;
                  //     console.log('complete');
                  // });
              }
          }
      }
  
      valueChange = (event:any)=&gt;{
          this.setState({
              errors:{
                  value:false,
                  errorMessage:''
              }
          })
          if(event.target.name===&quot;username&quot;){  
              this.checkExistingUser(event.target.value,this.state.users);
          }
          else{
              this.checkExistingUser(this.state.username,this.state.users);
          }
          this.setState({[event.target.name]:event.target.value});
      }
  
      checkExistingUser=(inputedUsername:string,existingUserNames:any)=&gt;{
          console.log(inputedUsername);   
          var i:number=0;
          while(i&lt;existingUserNames.length){
              if(inputedUsername===existingUserNames[i].username){
                  this.setState({
                      errors:{
                          value:true,
                          errorMessage:&quot;Username already exist..!&quot;
                      }
                  })
                  break;
              }else{
                  this.setState({
                      errors:{
                          value:false,
                          errorMessage:''
                      }
                  })
              }
              i+=1;
          }
      }
      
      render(){
          return(
              &lt;div className=&quot;authenticationBox&quot;&gt;    
                  &lt;h3 style={{marginTop:&quot;none&quot;}}&gt;Register&lt;/h3&gt;
                  &lt;form onSubmit={this.registration} className=&quot;flexBoxColumn&quot;&gt;
                      &lt;InputBox Type=&quot;text&quot; Classes=&quot;inputBox&quot; Name=&quot;username&quot; OnClick={this.valueChange} PlaceHolder=&quot;Enter Username/Email&quot;/&gt;
                      &lt;InputBox Type=&quot;password&quot; Classes=&quot;inputBox&quot; Name=&quot;password&quot; OnClick={this.valueChange} PlaceHolder=&quot;Enter Password&quot; /&gt;
                      &lt;InputBox Type=&quot;password&quot; Name=&quot;cpassword&quot; Classes=&quot;inputBox&quot; OnClick={this.valueChange} PlaceHolder=&quot;Re-enter Password&quot; /&gt;
                      {this.state.errors.value ? &lt;Labels labelName={this.state.errors.errorMessage}/&gt; : null}
                      &lt;InputBox Type=&quot;submit&quot; Value=&quot;Register&quot; Classes=&quot;submitButton inputBox&quot; /&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  <p>File: users.json</p>
  <pre><code>
  [ 
      {  
        &quot;username&quot;: &quot;Dinesh0098&quot;,  
        &quot;password&quot;: &quot;123456&quot;
      }, 
      { 
         &quot;username&quot;: &quot;worriormp&quot;, 
         &quot;password&quot;: &quot;qwertyuiop&quot;
      } 
  ]
  </code></pre>
  <p>OUPUT on console when I register</p>
  <pre><code>[{&quot;username&quot;:&quot;Dinesh0098&quot;,&quot;password&quot;:&quot;123456&quot;},{&quot;username&quot;:&quot;worriormp&quot;,&quot;password&quot;:&quot;qwertyuiop&quot;},{&quot;username&quot;:&quot;Dinesh&quot;,&quot;password&quot;:&quot;123&quot;}]
  </code></pre>