The overlayAdd() function works fine when it is initially called and when it is referred back to when the Close button is clicked. However, I get an error when it is referred back to when the Save button is clicked. Everything after that works as expected - the render happens and all the data reflects the new state. But how do I address that error?
I suspect that the overlayAdd() is somehow not fully react compliant and when it is referred back to after a setState happens, something goes wrong.
To see my current CodePen for this project go here
The script:
var GenerateRecipesFromList= React.createClass({
getInitialState: function(){
const defaultData = ['Spaghetti: pasta, oil, sauce, parsely, cheese', 'PB&J: PB, J']
const localData = JSON.parse(localStorage.getItem('reclist'));
return {
reclist: localData ? localData : defaultData
}
},
overlayAdd: function() {
var el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility === "visible") ? "hidden" : "visible";
},
exposeAddRecipe: function(){
var exposeCurrentData = [];
var userInput = [];
exposeCurrentData = JSON.parse(localStorage.getItem('reclist'));
var newTitle = document.getElementById("title").value;
var newIngredients = document.getElementById("ingredients").value;
userInput.push(newTitle);
userInput.push(newIngredients);
exposeCurrentData.push(userInput);
localStorage.setItem('reclist', JSON.stringify(exposeCurrentData));
this.setState({ reclist: exposeCurrentData});
this.overlayAdd();
},
exposeEditRecipe: function(sniffer){
var exposeCurrentData2 = [];
exposeCurrentData2 = JSON.parse(localStorage.getItem('reclist'));
var currentDescription = exposeCurrentData2[sniffer];
var changerecipe = prompt("Current description: " + currentDescription, "Update your description here.");
exposeCurrentData2[sniffer] = changerecipe;
this.setState({ reclist: exposeCurrentData2})
},
exposeDeleteRecipe: function(sniffer){
var exposeCurrentData3 = [];
exposeCurrentData3 = JSON.parse(localStorage.getItem('reclist'));
var currentDescription2 = exposeCurrentData3[sniffer];
exposeCurrentData3.splice(sniffer, 1);
localStorage.setItem('reclist', JSON.stringify(exposeCurrentData3));
this.setState({ reclist: exposeCurrentData3});
},
render: function(){
var testData = JSON.parse(localStorage.getItem('reclist'));
if(testData === null){
localStorage.setItem('reclist', JSON.stringify(this.state.reclist));
}
var currentData = JSON.parse(localStorage.getItem('reclist'));
var rows = [];
for(var i=0; i<currentData.length; i++){
var thedivname = i;
rows.push(<div id= {this.thedivname} className="individual"> <span>{this.state.reclist[i]}</span> <button type="button" id="btnEdit" onClick={this.exposeEditRecipe.bind(this,thedivname)}>Edit Recipe</button> <button type="button" id="btnEdit" onClick={this.exposeDeleteRecipe.bind(this,thedivname)}>Delete Recipe</button>
</div>);
}
return(
<div>{rows}
<button type="button" id="btnAdd" onClick={this.overlayAdd}>Add Recipe</button>
<div id="overlay">
<div>
<form action="example/submit.html">
<p>Add a new recipe.</p>
Recipe Title: <input type="text" name="title" id="title" /><br/>
Ingredients: <input type="text" name="ingredients" id="ingredients" /><br/>
<button type="submit" onClick={this.exposeAddRecipe}>Save</button>
</form>
<p>Click here to <a href='#' onClick={this.overlayAdd}>close</a></p>
</div>
</div>
</div>
);
}
});
var Footer = React.createClass({
render() {
return (
<footer>
<div id="containerfooter">
<p>Written by <a href="http://codepen.io/profaneVoodoo/full/dXBJzN/">John Gillespie</a> for FreeCodeCamp Campers. Happy Coding!</p>
</div>
</footer>
);
}
});
var DisplayRecipes = React.createClass({
render:function(){
return(
<div className = "mainDiv">
<div className="titleDiv">
<h1>Recipe Box</h1>
<GenerateRecipesFromList />
<Footer />
</div>
</div>
);
}
});
ReactDOM.render(
<DisplayRecipes />,
document.getElementById('Recipes')
);