title: React JS Local Storage update on view change
body: <p>How can I update certain properties of a local storage item or object as new data is inputted throughout the user journey and not lose what was previously entered or if the user decides to update? </p>
  
  <p>My journey of 5 containers consisting of asking the user to input the following: </p>
  
  <ul>
  <li>Name: string </li>
  <li>Avatar: integer</li>
  <li>Favourite Genres: multiple strings</li>
  </ul>
  
  <p>On the first view I have created the local storage object / item that sets the name within the <code>handleSubmit</code> function.</p>
  
  <p>handleSubmit(event) {
      event.preventDefault();</p>
  
  <pre><code>//Profile object
  let profile = { 'name': this.state.name, 'avatar': null, 'genres': '' };
  
  // Put the object into storage
  localStorage.setItem('profile', JSON.stringify(profile));
  
  // Retrieve the object from storage
  var retrievedObject = localStorage.getItem('profile');
  
  //Log object
  console.log('retrievedObject: ', JSON.parse(retrievedObject));
  
  //On form submission update view
  this.props.history.push('/profile/hello');
  </code></pre>
  
  <p>}</p>
  
  <p>On my second view I want to update only the <code>avatar</code> property and maintain what the user had inputted in the previous view. </p>
  
  <p>I'm doing this within the handleSelect function like so: </p>
  
  <pre><code>handleSelect(i) {
      let selectedAvatarId;
      let avatars = this.state.avatars;
  
      avatars = avatars.map((val, index) =&gt; {
        val.isActive = index === i ? true : false;
        return val;
      });
  
      this.setState({
        selectedAvatarId: selectedAvatarId
      })
  
      //Profile object
      let profile = { 'avatar': i };
  
      //Update local storage with selected avatar
      localStorage.setItem('profile', JSON.stringify(profile));
    }
  </code></pre>