title: Using local storage in ReactJS
body: <p>I'm making a recipe box project, I have a recipe state that has an array of recipe objects. </p>
  
  <p>I use the saveToLocal function to save the current state into local storage like this: </p>
  
  <pre><code> saveToLocal = () =&gt; {
   const local = this.state.recipe;
   localStorage.setItem("recipe", JSON.stringify(local));
  }
  </code></pre>
  
  <p>and pass it back to functions that add, edit or delete new recipe like this </p>
  
  <pre><code> addNewRecipe = (newRecipe) =&gt; {
    this.setState({
    recipe: [...this.state.recipe,newRecipe]
    }, this.saveToLocal);
  }
  
   editRecipe = (recipe) =&gt; {
     let selectedRecipe =this.state.recipe.find(obj=&gt;obj.count==recipe.count)
     let editedRecipe = Object.assign(selectedRecipe,recipe);
     this.setState(Object.assign(this.state.recipe,editedRecipe),this.saveToLocal)
  }
  
  deleteRecipe = (recipe) =&gt; {
    let arr = this.state.recipe.filter(obj =&gt; obj.count !== recipe.count);
  }
  </code></pre>
  
  <p>However this does not work as I refresh the app, but when I check the local storage inside the inspect tool the localstorage still has recipe data. What is the way to fix this?</p>
  
  <p>Thank you</p>