title: How to save previous state/ page data before going to another page in React JS
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>this.state = {
              name: '',
              color: '',
              description: '',
              beacons: []
          };
          
           handleColors = (item) =&gt; {
            this.setState({
                color: item.value
            });
  
        };
  
      handleBeaconChange = (beacons) =&gt; {
            this.setState({
                beacons
            });
            
        };
  
      handleInputChange(event) {
  
          this.setState({
              [event.target.name]: event.target.value
          });
  
      }
      
      &lt;div className="mb-1  margin-input"&gt;
                      &lt;span className=" form-font div-width"&gt;NAME&lt;span className="font-css top"&gt;*&lt;/span&gt;&lt;/span&gt;
                        &lt;input type="text"
                         className="form-control margin-select" 
                         placeholder="Name"
                         value={this.state.name}
                          name="name" 
                          onChange={this.handleInputChange}
                         /&gt;
                      &lt;/div&gt;
  
                      &lt;div className="mb-1"&gt;
                           &lt;span className=" form-font div-width"&gt;
                              COLOR&lt;/span&gt;
                          &lt;Select
                            className="margin-select"
                            value={this.state.color}
                            options={colorValues}
                            onChange={this.handleColors}/&gt;
                      &lt;/div&gt;
  
                      &lt;div className="mb-1  margin-input"&gt;
                      &lt;span className=" form-font div-width"&gt;DESCRIPTION&lt;/span&gt;
                        &lt;textarea 
                        className="form-control margin-select" 
                        placeholder="Description"
                        value={this.state.description}
                          name="description" 
                          onChange={this.handleInputChange}
                        /&gt;
                      &lt;/div&gt;
  
                      &lt;h3 className=""&gt;{this.props.label}&lt;/h3&gt;
  
                      &lt;div className="mb-1"&gt;
                           &lt;span className=" form-font div-width"&gt;
                              BEACON (s)&lt;/span&gt;
                          &lt;Select.Async 
                            multi={true} 
                            className="margin-select"
                            value={this.state.beacons}
                            loadOptions={getBeacons}
                            onChange={this.handleBeaconChange}/&gt;
  
                            &lt;div className="panel-body"&gt;
                          &lt;a href={'/new-beacon'} className="pull-right"&gt;Add Beacon&lt;/a&gt;
                        &lt;/div&gt;
  
                      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/DsJdU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DsJdU.png" alt="enter image description here"></a>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?</p>