React Recipe Box '_this2' Problem(SOLVED)

escottalexander · March 21, 2017, 9:16am

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.

Faizahmadfaiz · March 21, 2017, 9:37am

<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

escottalexander · March 21, 2017, 7:53pm

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.

mblood · March 21, 2017, 8:05pm

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

  }
}

escottalexander · March 22, 2017, 8:57am

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.

jenovs · March 22, 2017, 9:02am

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

escottalexander · March 22, 2017, 9:09am

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

jenovs · March 22, 2017, 9:16am

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)

escottalexander · March 22, 2017, 9:19am

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

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

  }
}

jenovs · March 22, 2017, 9:24am

In the hurry I missed the arrow function in you code

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

escottalexander · March 22, 2017, 9:27am

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

jenovs · March 22, 2017, 9:31am

Yes.
You have two options:

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

or

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

escottalexander · March 22, 2017, 9:36am

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.

jenovs · March 22, 2017, 9:47am

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

escottalexander · March 22, 2017, 8:44pm

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!

jenovs · March 22, 2017, 9:11pm

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

escottalexander · March 22, 2017, 9:38pm

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

KEH9 · December 26, 2018, 3:55pm

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

japser36 · October 16, 2019, 2:10am

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,

escottalexander:

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

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

  }
}

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

Topic		Replies	Views
React Recipe Box help	3	504	January 17, 2021
[SOLVED] Problem: React Recipe App - index not passed to function JavaScript	2	617	January 18, 2021
Problems with React Recipe Box react	3	628	January 17, 2021
Feedback on Recipe Box project Code Feedback	9	1578	June 1, 2021
React Question Help	4	736	January 17, 2021

React Recipe Box '_this2' Problem(SOLVED)

Related topics