On the recipe box project in the react section. my main App component has a state property called recipes that is an array filled with recipe objects.
like this:
class App extends React.Component {
constructor(props){
super(props);
this.state = {
currentKey: 3,
recipes: [
{
key: 1,
title: 'Fried Rice',
ingredients: ['rice', 'oil', 'carrots', 'peas', 'eggs'],
instructions: 'do this and then that'
},......
and in the render method for this main App component, it renders components, passing along the data as props, like this: <Recipe title={this.state.recipes[i].title}..... />
Also I pass along to a property that points to a save() function in the main App component that will update any changes made through the specific item that the user is editing/deleting.
All that seems to be working fine, the state in main app and the state in each recipe item is acting the way I want them to, staying updated and all that, but heres the problem:
Problem:
when I click the delete button on a recipe, that recipe does not delete. instead, the last recipe on the recipes list deletes. even though both App’s and Recipe’s states show in the console that the intended item is removed.
in other words (in case that wasn’t clear) i want to delete a recipe in a list of 3. I click to delete recipe 2, and console.log(this.state) shows that recipe 2 is, as expected, gone, while 1 and 3 are left. Oddly, recipe 3 is the one that disappears on the screen.
I noticed that the items don’t seem to be re-rendering, even after using this.setState() and even this.forceUpdate(), because console.logs in 's constructor() method were not running when I do those things.
my codepen is here