javascript - React create an array queue of objects to be sent once connection is available -

i have following jsx code:

import react, { component } 'react';  import axios 'axios'; import serialize 'form-serialize';  var = [], b= [];  class form extends component {     constructor(props) {         super(props);          this.state = {             firstname: '',             email: '',             university: '',             degree: '',             candidates: []         }          this.setfirstname = this.setfirstname.bind(this);         this.setemail = this.setemail.bind(this);         this.setuniversity = this.setuniversity.bind(this);         this.setdegree = this.setdegree.bind(this);      }      setfirstname(name) {         this.setstate({             firstname: name         });     }      setemail(email) {         this.setstate({             email: email          });     }      setuniversity(university) {         this.setstate({             university: university         });     }      setdegree(degree) {         this.setstate({             degree: degree         });     }      setcandidates(candidates) {         this.setstate({             candidates: candiadtes         })     }      getsingleinputvalue(e) {          if(e.target.getattribute('name') == 'name'){             this.setfirstname(e.target.value);         }          if(e.target.getattribute('name') == 'email'){             this.setemail(e.target.value);         }          if(e.target.getattribute('name') == 'university'){             this.setuniversity(e.target.value);         }          if(e.target.getattribute('name') == 'degree'){             this.setdegree(e.target.value);         }      }      submitform(e) {         var token = document.getelementsbytagname("meta")[0].getattribute("content");         var form = document.queryselector('.form');          e.preventdefault();          var singlecandidate = serialize(form, { hash: true });          if(json.parse(localstorage.getitem("candidates"))) { // checks if there 1 or more values             a.length = 0;             a.push(json.parse(localstorage.getitem("candidates")));              b.push(singlecandidate);              var temp = a.concat(b);              // localstorage.setitem("candidates", json.stringify(temp));             // console.log(json.parse(localstorage.getitem("candidates")));         }          else {             localstorage.setitem("candidates", json.stringify(singlecandidate));             console.log(json.parse(localstorage.getitem("candidates")));         }       render() {         let isvisible = this.props.visibility ? "" : "hide-form";          return(             <form classname={"form " + isvisible}>                 <input                      placeholder="john green"                      type="text"                      name="name"                     onchange={this.getsingleinputvalue.bind(this)} />                  <input                      placeholder="email"                      type="text"                      name="email"                     onchange={this.getsingleinputvalue.bind(this)} />                  <input                      placeholder="university"                     type="text"                      name="university"                     onchange={this.getsingleinputvalue.bind(this)} />                  <input                      placeholder="degree"                     type="text"                      name="degree"                     onchange={this.getsingleinputvalue.bind(this)} />                  <button onclick={this.submitform.bind(this)}>enter</button>             </form>         );     } }  export default form; 

i trying save data local storage , create sort of queuing system, once connection back, can submit data axios.

inside "submitform(e)":

• if it's first time (inside else) populate localstorage first object (singlecandidate)

• otherwise trying save data array , combining new array based on existing values inside localstorage.

however, getting array inside array:

the aim if there no connection , user updates form, each form submitted array gets populated data , stored in localstorage.

how can every form submission store data in single object , update array pushed localstorage , being retrieved once connection back?

after having little private chat i'm posting updated implementation of submitform method works alex:

submitform(e) {    e.preventdefault();    var token = document.getelementsbytagname("meta")[0].getattribute("content");    var form = document.queryselector('.form');     var singlecandidate = serialize(form, { hash: true });    var fromstorage = localstorage.getitem("candidates")     if (fromstorage) {      var parsedfromstorage = json.parse(fromstorage)      parsedfromstorage.push(singlecandidate)      localstorage.setitem("candidates", json.stringify(parsedfromstorage))    } else {      localstorage.setitem("candidates", json.stringify([singlecandidate]));    }  } 

wiki