ReactJS - Recipe Box challenge - toggling a modal dialogue throws an error

ReactJS - Recipe Box challenge - toggling a modal dialogue throws an error
0

#1

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')
);

#2

You misspelt the function name here


#3

I have corrected the misspelling in the post and in the codepen. However, I am still getting an error message.


#4

I had a bit of trouble understanding what you were coding and the purpose for each of your functions.
However, I did notice that you are using a form with an invalid action… I don’t believe you need the form. If I just removed the form, and removed the submit typing from your save button, I don’t get any errors aside from the one on initial load.
Could you post the error that you’re receiving?


#5

It’s ok to use form, just remove action="example/submit.html" from the form and add e.preventDefault() in your exposeAddRecipe function:

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

#6

Yup, looks like that was the culprit.