How to save previous state/ page data before going to another page in React JS

Question

this.state = {
            name: '',
            color: '',
            description: '',
            beacons: []
        };
        
         handleColors = (item) => {
          this.setState({
              color: item.value
          });

      };

    handleBeaconChange = (beacons) => {
          this.setState({
              beacons
          });
          
      };

    handleInputChange(event) {

        this.setState({
            [event.target.name]: event.target.value
        });

    }
    
    <div className="mb-1  margin-input">
                    <span className=" form-font div-width">NAME<span className="font-css top">*</span></span>
                      <input type="text"
                       className="form-control margin-select" 
                       placeholder="Name"
                       value={this.state.name}
                        name="name" 
                        onChange={this.handleInputChange}
                       />
                    </div>

                    <div className="mb-1">
                         <span className=" form-font div-width">
                            COLOR</span>
                        <Select
                          className="margin-select"
                          value={this.state.color}
                          options={colorValues}
                          onChange={this.handleColors}/>
                    </div>

                    <div className="mb-1  margin-input">
                    <span className=" form-font div-width">DESCRIPTION</span>
                      <textarea 
                      className="form-control margin-select" 
                      placeholder="Description"
                      value={this.state.description}
                        name="description" 
                        onChange={this.handleInputChange}
                      />
                    </div>

                    <h3 className="">{this.props.label}</h3>

                    <div className="mb-1">
                         <span className=" form-font div-width">
                            BEACON (s)</span>
                        <Select.Async 
                          multi={true} 
                          className="margin-select"
                          value={this.state.beacons}
                          loadOptions={getBeacons}
                          onChange={this.handleBeaconChange}/>

                          <div className="panel-body">
                        <a href={'/new-beacon'} className="pull-right">Add Beacon</a>
                      </div>

                    </div>

This is the image. Now i just wanted to save previous form data before going to another page Like for example in this picture i had entered name and color values in the fields and when i click on "Add beacon link", it will route me to another form but the values i entered in this form were lost when i will come back to it. Any solutions regarding that?

How to do that with redux? or localstorage? I'm already using redux actions reducers but how with redux? — Piyush, Jun 07 '17 at 10:10

score 4 · Accepted Answer · answered Jun 07 '17 at 10:17

4

You can make use of Redux to achieve the same. What you need to do is to save the form states in redux store rather than the component localState itself

You reducer will look something like

const initialState = {
      name: '',
            color: '',
            description: '',
            beacons: []
}
const BeaconForm = (state = initialState, action) => {
      switch(action.type) {
          case 'UPDATE_BEACON_FORM_VALUE': 
               return {
                    ...state, [action.newVal.key]: action.newVal.value
               }
          default: return state
      }
}

export default BeaconForm

And then have an action

export function updataFormValue(updatedVal) {
       return { type: 'UPDATE_BEACON_FORM_VALUE', newVal: updatedVal}
}

And in the compoennt

handleInputChange(event) {

    var data = {[event.target.name]: event.target.value}
    this.props.updataFormValue(data);

}

Apart from this you need to make your component Redux compatible with connect, mapStateToProps , etc which I assume you already know

And then instead of setting input value from state you will set it from props that youu get from redux store

answered Jun 07 '17 at 10:17

Shubham Khatri

270,417
55
406
400

thanks but this approach i think will be complex compared to local storage? How to achieve with local storage? – Piyush Jun 07 '17 at 10:22
but I'm thinking of to go with local storage because of lack of time actually – Piyush Jun 07 '17 at 10:25
1

On `localStorage.setItem('FormData', JSON.stringify(data))` where data is `var data = {...this.state}` and later you can setback to state after retireving it like `JSON.parse(localStorage.getItem('FormData'))` – Shubham Khatri Jun 07 '17 at 10:27
i tried this and i just done console.log(JSON.parse(localStorage.getItem('FormData'))), this is showing like for example if i had typed "hello", it will show in console as "hell", that is, one character less than being typed – Piyush Jun 07 '17 at 10:34
so you are copying the state after setting right. I that ase setState teakes time to mutate,Do it in callback – Shubham Khatri Jun 07 '17 at 10:37
See this https://stackoverflow.com/questions/41278385/change-state-on-click-react-js/41278440#41278440 – Shubham Khatri Jun 07 '17 at 10:37
handleInputChange(event) { this.setState({ [event.target.name]: event.target.value }); localStorage.setItem('formData', JSON.stringify(this.state)); console.log(JSON.parse(localStorage.getItem('formData'))) } componentWillMount = () => { if(localStorage.formData) { console.log(localStorage.getItem(localStorage.formData)) } }; , i did this actually – Piyush Jun 07 '17 at 10:41
i got it but how o show now those set values in local storage in input fields again – Piyush Jun 07 '17 at 10:54
1

In componentWillMount and fetch the localStorage value and set the state based on them – Shubham Khatri Jun 07 '17 at 10:55
just a problem with setting that omitting last character before setting – Piyush Jun 07 '17 at 11:32
1

Doing it in setState callback will solve the problem i think – Shubham Khatri Jun 07 '17 at 11:33
If this.state.beacons work, it will also work.make sure to set state correctly – Shubham Khatri Jun 07 '17 at 11:49
No problem, glad to have helped :) – Shubham Khatri Jun 07 '17 at 12:24
https://stackoverflow.com/questions/45294748/conditional-api-call-and-send-data-in-react-select – Piyush Jul 25 '17 at 05:41

How to save previous state/ page data before going to another page in React JS

1 Answers1