React: setting state based on local storage

Question

When I run this code, I get a bootstrap panel group for each recipe item inside of local storage. When I try to delete a recipe, sometimes the right recipe is removed and sometimes not. The console shows that the right recipe is removed from local storage but for some reason when the app component resets its state, the wrong recipe is removed. I've noticed that if I try to delete the recipes from the bottom up, it works. But if I click on the first recipe, the bottom recipe is removed.

I know this is an easy fix but I need a fresh perspective. Thanks everyone! Also, sorry lack of indentation in the code - stack overflow wasn't being too friendly with the spacing

class App extends Component {
  constructor() {
  super();
  this.deleteRecipe = this.deleteRecipe.bind(this)
  this.state = {
    recipeData: JSON.parse(localStorage.getItem('recipeData'))
 }
}

deleteRecipe() {
this.setState({recipeData: JSON.parse(localStorage.getItem('recipeData'))})
}

render() {
 return (
  
    
      
      Welcome to React Recipe Box!
    

    
      {this.state.recipeData.map(recipe => {
        return (
        
        )
      })}
    
  
);
}
}

class Recipe extends Component {
 constructor() {
 super();
  this.onDeleteRecipe = this.onDeleteRecipe.bind(this)
 }

componentWillMount(){   //set state when component is about to mount
this.state = {
  name: this.props.name,
  ingredients: this.props.ingredients,

}
}

onDeleteRecipe() {
var recipeList = JSON.parse(localStorage.getItem('recipeData'));
for(var i = 0; i < recipeList.length; i++) {
  if(recipeList[i].name === this.state.name) {
    recipeList.splice(i, 1);
    console.log("Deleted " + this.state.name, recipeList);
    localStorage.removeItem('recipeData');
    localStorage.setItem('recipeData', JSON.stringify(recipeList));

    this.props.deleteRecipe();
  }
 }

}

 render() {
 return (
 
  
    
      
        
          
             {this.state.name}
          
        >              
      
     
       
          {this.state.ingredients.map(ingredient => {
            return {ingredient}
          })}
          
            
            
          
      
     
    
  


    
        
          
            Edit {this.state.name}
          
          
            
              {this.state.ingredients.map( ingredient => {
                return {ingredient}
              })}
            
          
          
            
              
              
            
          
        
      


      
        
          
            This will remove the selected recipe. Are you sure?
          
          
            
              
              
            
          
        
      
 
);
}
}

export default App;

R.L. Brown · Accepted Answer

I'm still a novice, but... I built a react recipe box for FreeCodeCamp a few months ago, so I just pulled it up to compare my delete function to yours.

I notice that you treat localStorage differently than I did in mine. (Not that my way is best or even right!) I wonder if somehow the problem is rooted in that design. Your delete function goes into localStorage and makes changes, then you run a setState to sort of "re-get" the recipeData, if I'm reading right?

By contrast, my app declares a variable from localStorage and I set this.state.recipeArray to equal that variable. Then all of my edit/add/delete functions change this.state.recipeArray, not localStorage. Sorta like this:

handleDelete: function(e) {
    e.preventDefault();

    var replacementRecipeArray = this.state.recipeArray.filter((recipe) => recipe.title !== e.target.name);
    //dot-filter with ES6 fat-arrow returns all items where title doesn't match the one we clicked; IOW, it removes the one we want to delete

    this.setState({
      recipeArray: replacementRecipeArray
    });

  }

In order to get any changes to this.state.recipeArray back to localStorage, I do a localStorage.setItem every time I render the page.

render() {
    //first save current array to localstorage - wasn't reliable anywhere else
    localStorage.setItem("_shoesandsocks_recipes", JSON.stringify(this.state.recipeArray));

    //render page
    return (
      
         
          // etc etc

For all I know this is a crazy design, but it works.

React: setting state based on local storage

Answers (1)

Related Questions