React Recipe Box '_this2' Problem(SOLVED)

#1

Hey guys, I have been working on this problem for a solid week now and I am getting nowhere.

What happens is that I have an onClick event that triggers a function that is setup inside the parent element and for whatever reason when I call on the function(click the button) it tells me this ‘_this2.deleteRecipe’ is undefined.

Here is the code I am working with. Thanks so much for helping me. Many of the functions are not set up in any way, but once I get deleteRecipe working the other functions will follow its pattern.

if (localStorage.getItem("elliott_recipes")) {
	var recipeList = JSON.parse(localStorage.getItem("elliott_recipes"));
} else {
	var recipeList = [{
		id: 1,
		recipeName: "Apple Pie",
		ingredients: "apple,dough"
	}, {
		id: 2,
		recipeName: "Lemon Pie",
		ingredients: "lemon,dough"
	}, ];
}

class Recipe extends React.Component{
constructor(props) {
	super(props);
	this.state = {
		recipes: recipeList,
		addRecipe: function() {
		alert("hello");
		updateChanges(this.state.recipeList());
	},
	editRecipe: function(key) {
		alert("hello");
		updateChanges(this.state.recipeList());
	}
	deleteRecipe: function(id) {
		for (var j = 0; j < this.recipes.length; j++) {
			if (this.recipes[j].id == id) {
				this.recipes.splice(j, 1);
			}
		}
		updateChanges(recipeList);
		console.log(recipeList);
	}
	}
	}

	

	
//this is were the onClick issues come from. 
	render() {
		var dispList = [];
		this.state.recipes.forEach(function (item, i) {
console.log();
			dispList.push(<div key={"key_"+ i}><h3>Recipe: {item.recipeName} - <button onClick={() =>{this.state.editRecipe(item.id)}}>Edit</button> <button onClick={() =>{this.state.deleteRecipe(item.id)}}>Delete</button></h3><p>Ingredients: {item.ingredients}</p><br /></div>);
		})
		return (
			<div>
			{dispList}
		<button onClick={() =>{this.addRecipe()}}>Add Recipe</button>
   </div>
		)

	}
};

ReactDOM.render(<Recipe />, document.getElementById('content'));

function updateChanges(y) {
	localStorage.setItem("elliott_recipes", JSON.stringify(y));
}

I am new to React and so it is totally a possibility that I am missing something really simple here.

#2

<button onClick={() =>{this.addRecipe()}}>Add Recipe</button>
change this line to

<button onClick={() =>{this.addRecipe().bind(this)}}>Add Recipe</button>
Notice the use of bind(this)

Also check this -
Refactoring React components to ES6 classes

#3

I changed that bit of code and it gives me the same error.

Also, if I change this.state.deleteRecipe(item.id) to this.deleteRecipe(item.id) or any other path it gives this error. TypeError: undefined is not an object (evaluating ‘_this2.deleteRecipe’) or TypeError: undefined is not an object (evaluating ‘_this2.state’) depending on what directly follows ‘this’. Basically it has to do with where I am referencing ‘this’ from but I am inside the same component. I don’t know why it won’t work like everywhere else in the component. If I just tell it to console.log(this) it will return undefined. Something must be wrong with how I am using ‘this’.

I am really stumped, any help is greatly appreciated.

#4

It looks like you’re confusing some of the things about React and ES6 classes.

I’ve moved some stuff around to help move you into the right direction. One thing I want to point out is that the functions for the class are not part of this.state.

this.state holds data, like the recipeList. Functions that operate on the state go outside of the constructor, like I’ve shown below. Then, to modify the state, you’d use this.setState({ /* new state */ });

class Recipe extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      recipes: recipeList,
    };
  }

  editRecipe(key) {
    // do things
  }

  addRecipe() {
    // do things
  }

  deleteRecipe(id) {
    // do things
  }


  //this is were the onClick issues come from. 
  render() {
    var dispList = [];
    this.state.recipes.forEach(function (item, i) {
      console.log();
      dispList.push(<div key={ "key_" + i }><h3>Recipe: { item.recipeName } - <button onClick={ () => { this.state.editRecipe(item.id) } }>Edit</button> <button onClick={ () => { this.state.deleteRecipe(item.id) } }>Delete</button></h3><p>Ingredients: { item.ingredients }</p><br /></div>);
    })
    return (
      <div>
        { dispList }
        <button onClick={ () => { this.addRecipe() } }>Add Recipe</button>
      </div>
    )

  }
}
#5

Thanks mblood! I reorganized the code like you did and now my functions are outside of ‘state’. Sadly, That isn’t fixing the problem. It still gives me the 'TypeError: undefined is not an object (evaluating ‘_this2.deleteRecipe’)

Why does ‘this’ read out with a underscore and a two next to it? ‘_this2.’

Thanks for the help. I really hope someone can figure this out.

#6

You should post the code. As I see from error, you are not binding this.

#7

Here is the code as I have it now. Should I update the code at the top of this post or will that just confuse people? Am I incorrectly binding them in this? Thanks.



if (localStorage.getItem("elliott_recipes")) {
	var recipeList = JSON.parse(localStorage.getItem("elliott_recipes"));
} else {
	var recipeList = [{
		id: 1,
		recipeName: "Apple Pie",
		ingredients: "apple,dough"
	}, {
		id: 2,
		recipeName: "Lemon Pie",
		ingredients: "lemon,dough"
	}, ];
}

class Recipe extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      recipes: recipeList,
    };
  }

  editRecipe(key) {
    console.log('editRecipe is working');
  }

  addRecipe() {
    console.log('addRecipe is working');
  }

  deleteRecipe(id) {
   console.log('deleteRecipe is working');
  }


  //this is were the onClick issues come from. 
  render() {
    var dispList = [];
    this.state.recipes.forEach(function (item, i) {
      console.log();
      dispList.push(<div key={ "key_" + i }><h3>Recipe: { item.recipeName } - <button onClick={ () => { this.editRecipe(item.id).bind(this) } }>Edit</button> <button onClick={ () => { this.deleteRecipe(item.id).bind(this) } }>Delete</button></h3><p>Ingredients: { item.ingredients }</p><br /></div>);
    })
    return (
      <div>
        { dispList }
        <button onClick={ () => { this.addRecipe().bind(this) } }>Add Recipe</button>
      </div>
    )

  }
}


ReactDOM.render(<Recipe />, document.getElementById('content'));

function updateChanges(y) {
	localStorage.setItem("elliott_recipes", JSON.stringify(y));
}
#8

You are doing binding incorrectly.

This is how it should be done:

this.nameOfTheFunction.bind(this, arguments)

So instead of:

this.editRecipe(item.id).bind(this)

you should write:

this.editRecipe.bind(this, item.id)
#9

I switched it around and I was so hopeful! It is doing the exact same error! :sob:

render() {
    var dispList = [];
    this.state.recipes.forEach(function (item, i) {
      console.log();
      dispList.push(<div key={ "key_" + i }><h3>Recipe: { item.recipeName } - <button onClick={ () => { this.editRecipe.bind(this, item.id) } }>Edit</button> <button onClick={ () => { this.deleteRecipe.bind(this, item.id) } }>Delete</button></h3><p>Ingredients: { item.ingredients }</p><br /></div>);
    })
    return (
      <div>
        { dispList }
        <button onClick={ () => { this.addRecipe.bind(this) } }>Add Recipe</button>
      </div>
    )

  }
}
#10

In the hurry I missed the arrow function in you code :innocent:

If you bind, you don’t need arrow function.

#11

Do you mean that this { () => { this.addRecipe.bind(this) } } becomes this { this.addRecipe.bind(this) } ?

#12

Yes.
You have two options:

onClick={() => this.functionName()}

or

onClick={this.functionName.bind(this)}
#13

I just tried that and it makes my functions try to execute on page load. That is why I put the arrows in originally, but even more depressing is that when I refreshed the page wouldn’t load because it conked out on the same old ‘_this2.’ error. Thanks so much for the help. I hope we can figure this out.

#14

Here I wrote a quick codepen: http://codepen.io/jenovs/pen/aJYPBM?editors=0011

#15

Wow, that is really helpful. I am understanding what you are showing me. Thanks. I still have some questions though, maybe you would have some insight.

I am currently thinking that the reason why my pen doesn’t work has something to do with my method of using a for loop to create the list in lines of JSX contained in dispList. Is it possible that when I reference ‘this’ that is doesn’t know what ‘this’ is because of the way it is pushed into a array(dispList) and then rendered from that? Whenever I console.log ‘this’ from inside the for loop, it comes back undefined.

Any thoughts? If that is it, do you have any other ideas for creating a list without pushing into an array?

Thanks!

#16

Your dispList is empty array and it doesn’t get updated. Render is only run on state change (and you can’t change state in render function).
You should make dispList a function and use map to iterate over array.

I updated the codepen with example: http://codepen.io/jenovs/pen/aJYPBM?editors=0011

#17

You are a genius!!! Thank you so much for all of the help! This is exactly what I needed. Thank you!

#18

I have the same problem, but codepen links do not works now. Should you explain the solution ones again please?

#19

I realize this has been dead for a while, but the issue was the following:
@escottalexander was using the following code to loop over his items,

The troubling line in the code is the function inside the forEach loop. This function must also be bound to the context of the component, using one of the two methods that @jenovs mentioned:

So if in the forEach loop one used a function such as this, it should work correctly.

this.state.recipeList.forEach((function (item, i) {
  /* render a single recipe */
}).bind(this));
// OR
this.state.recipeList.forEach((item, i) => { // this works because a 'fat arrow function' is automatically bound to the context in which it is first defined
  /* render a single recipe */
});

The functions were being bound correctly inside the forEach loop, but the function that was being called to do this is what it was being bound to instead of the component. I came accross this thread while trying to fix my own issue where the error was mentioning an unknown “_this2”, and now I have a clue that I’m probably forgetting to bind one of my functions along the way. I hope this helps anyone stumbling across this in the future! (Hello future!)

1 Like
#20