How do I get a div (in this case, the div called “overlay2”) to render with an input field pre-populated with a value from an array (such as the title of the recipe from the reclist array)?
For example, when I click on the first View/Edit button for the “spaghetti” recipe and the overlay displays, I want the first input field to be populated with the word “Spaghetti.” The user can either leave it the way it is or type over it.
This was easy to do in Javascript, but for some reason I cannot figure out what to put in the HTML that React is injecting. For example, I tried "{this.state.reclist[i][0]} " in line 96 inside the input tag, but that did not work.
(To see the CodePen for this, go here)
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";
},
overlayEdit: function() {
var el2 = document.getElementById("overlay2");
el2.style.visibility = (el2.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 newTitle2 = document.getElementById("title2").value;
var newIngredients2 = document.getElementById("ingredients2").value;
exposeCurrentData2[sniffer][0]=newTitle2;
exposeCurrentData2[sniffer][1]=newIngredients2;
localStorage.setItem('reclist', JSON.stringify(exposeCurrentData2));
this.setState({ reclist: exposeCurrentData2})
this.overlayEdit();
},
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 recipetitle = currentData[i][0];
var recipeingredients = currentData[i][1];
var thedivname = i;
rows.push(<div id= {this.thedivname} className="individual"> <span>{this.state.reclist[i][0]}</span> <button type="button" id="btnEdit" className="normalBtn" onClick={this.overlayEdit}>View/Edit Recipe</button> <button type="button" id="btnEdit" className="normalBtn" onClick={this.exposeDeleteRecipe.bind(this,thedivname)}>Delete Recipe</button>
</div>);
}
return(
<div>{rows}
<button type="button" id="btnAdd" onClick={this.overlayAdd}>Add a New Recipe</button>
<div id="overlay">
<div>
<form >
<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="button" className="normalBtn" onClick={this.exposeAddRecipe}>Save</button>
</form>
<p>Click here to <a href='#' onClick={this.overlayAdd}>close</a></p>
</div>
</div>
<div id="overlay2">
<div>
<form >
<p>Edit an existing recipe.</p>
Recipe Title: <input type="text" name="title2" id="title2">{this.recipetitle}</input><br/>
Ingredients: <input type="text" name="ingredients2" id="ingredients2"/><br/>
<button type="button" onClick={this.exposeEditRecipe.bind(this,thedivname)}>Save Changes</button>
</form>
<p>Click here to <a href='#' onClick={this.overlayEdit}>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')
);