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

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


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"); = ( === "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;
    localStorage.setItem('reclist', JSON.stringify(exposeCurrentData));
    this.setState({ reclist: exposeCurrentData});

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>
      <button type="button" id="btnAdd" onClick={this.overlayAdd}>Add Recipe</button>
        <div id="overlay">
            <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>
            <p>Click here to <a href='#' onClick={this.overlayAdd}>close</a></p>

var Footer = React.createClass({
    render() {
    return (
        <div id="containerfooter">
          <p>Written by <a href="">John Gillespie</a> for FreeCodeCamp   Campers. Happy Coding!</p>

var DisplayRecipes = React.createClass({
      <div className = "mainDiv">
          <div className="titleDiv">
          <h1>Recipe Box</h1>
            <GenerateRecipesFromList />
            <Footer />

  <DisplayRecipes />,


You misspelt the function name here


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


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?


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){


Yup, looks like that was the culprit.