Based on how you have implemented your React app, you could do something like the following:
editRecipe() {
const origRecipes = [...this.state.recipes]
const {selectedRecipe: {name}, editName, editIngredients, editDirections} = this.state
const replacement = {
name: editName,
ingredients: editIngredients,
directions: editDirections
}
const recipes = origRecipes.map(recipe => name === recipe.name ? replacement : recipe)
this.setState({recipes})
}
Awesome! Looks good, and understandable. The only thing now is that it seems to have stopped my delete button from working. Nothing in my chrome console to give me any help
deleteRecipe() {
const newRecipes = this.state.recipes.filter(
recipe => recipe.name !== this.state.selectedRecipe.name
);
this.setState({
recipes: newRecipes,
selectedRecipe: {}
});
}
Nevermind! For some reason my delete onClick was set to showing a modal. I dont know how that change happened, but it works fine now
Sorry. lots of posts here like I am talking to myself. I did have one question @camperextraordinaire
editRecipe() {
const origRecipes = [...this.state.recipes]
const {selectedRecipe: {name}, editName, editIngredients, editDirections} = this.state
const replacement = {
name: editName,
ingredients: editIngredients,
directions: editDirections
}
const recipes = origRecipes.map(recipe => name === recipe.name ? replacement : recipe)
this.setState({recipes,
showModal: false})
}
One question here on the line with selectedRecipe. this line is so I wont have to use this.state with all the variables. I can see that for the edit variables, but why does name, ingredients, and directions not use this.state.selectedRecipe?
No you’re right. I’m just thinking
This.state.selectedRecipe.name: editName
name: editName
Are they both not referring to the selected recipe or is name referring to something else?
So one thing left I want to do it split my ingredients, and directions on recipes by comma. I have this line which should split all input by comma
handleChange(evt) {
this.setState({ [evt.target.name]: evt.target.value.split(",") });
}
Im not sure about the join or where it should go. Also I need to somehow apply to String my map, since the recipes are objects so join and split wont work for the default recipes in there?
render() {
const ITEMS = this.state.recipes.map(({ name }, index) => (
<li>
<div onClick={() => this.handleRecipeClick(index)}>{name}</div>
</li>
So made some progress. The last thing to do is split the ingredients, and directions when the recipe is clicked on, and displayed. I have not been able to figure that out as selectedRecipe is nothing until the recipe is clicked on. So if I try to toString, and split it I get an error along the lines of "can not split property of undefined. I tried doing stuff in the click handle function, but that did not work either.
Hello, its me I was wondering if after all these days someone would like to help me? Seriosuly though im still stuck, and I would like to get this figured before the hurricane comes through in the next day and im without power.
So again I would like to split the ingredients and directions so when the recipe is clicked it looks like everything is on its own line. However the selectedRecipe is undefined until it it clicked on, then it becomes a object. I tried to make it a string in the handleRecipe method, but it I do that then the recipe does not show. Any help would be appreciated
So I have done this, and it doesnt seem to complain about the selectedRecipe being undefined. However I still can not get the ingredients to split. Any thoughts? From anyone?
{this.state.selectedRecipe.ingredients && <div>{this.state.selectedRecipe.ingredients.toString().split(",").join("\n")} </div> }
I guess the above won’t work. I was told “the view shouldn’t be doing this” so back to the drawing board. Any way to make directions and ingredients li’s without screwing up the map I have now?
@camperextraordinaire I’m sorry to do this, but any chance when you get time can you point me in the right direction here? Not getting any one on here, and I’ve tried another forum,. Unfortunately they think I should have 10 years of experience with this already.
Ill try to sum up so you don’t have to resell all my posts to myself. Basically when the recipe is clicked I want it shown as
Cheese
Bacon
Etc
Instead of
Cheese bacon etc. same thing for the directions. My initial plan was to split the object, but according to he other forum that doesn’t make sense. So how else could I do that? If you could give me a push
Yes. That is correct.
@camperextraordinaire So I actually get a list is not defined error from the first. I have the list component right before my addRecipe component.
<List items= {this.state.selectedRecipe.ingredients || []} />
Of course I have questions as well
1: I see why trying to use toString on ingredients, and directions wouldnt work. An entire recipe is an object, but ingredients, and directions are arrays in that object. So im still fuzzy on passing an empty array. items is set to the ingredients || (or) an empty array?
2: ive always been iffy when things came to using an index. I dont know why, but its always been a struggle for me. I know that the map that uses the handleRecipe function we originally used, used the index to show the recipe. Let me see if I got this
const liElems = props.items.map((item, i) => <li key={i}>{item}</li>);
return <ul>{liElems}</ul>
The map goes through ingredients and directions using the index, so when tacos is clicked selectedRecipe holds a copy of the recipes. Tacos has an index of 0. So when I click on tacos its pretty much saying “Show me the ingredients at index 0”?
@camperextraordinaire nevermind I got it. Was actually a brace missing. The recipe does show in the list which is nice, but now I guess I need to make changes to my add, and edit modals? If I add a new recipe the only thing to change is the name. My edit modal as well does not make any changes. Could this be because I was obsessed with the split and join?
@camperextraordinaire So unbelievably lost right now. I decided to got the string route, but of course I dont even know where to start. Now that ingredients, and directions are strings they dont show up when a recipe is clicked…only the name.
The add modal will only pop up if pressed before selecting a recipe, if clicked after the recipe nothing shows up and I get the error “items.map is not a function”
const List = props => {
const liElems = props.items.map((item, i) => <li key={i}>{item}</li>);
return <ul>{liElems}</ul>
}
Since the ingredients, and directions are no longer arrays, then I need to make a change to? But if I remove the array nothing renders
<List items= {this.state.selectedRecipe.directions || []} />
Then of course my edit does nothing saying it cant read my maps
handleModalShow = () => {
let thisDirections = this.state.selectedRecipe.directions.map((d) => { return d }).split(",").join("\n");
let thisIngred = this.state.selectedRecipe.ingredients.map((d) => { return d }).split(",").join("\n");
this.setState({
showModal: true,
editMode: true,
editName: this.state.selectedRecipe.name,
editDirections: thisDirections,
editIngredients: thisIngred
});
}
Im just beyond stressed at this point
Scratch that. I changed them back to arrays. I dont see why my edit, and add logic wont work because i added the list component? My handle change is splitting the user input, and the input should be set as state like it was doing before?
@camperextraordinaire youre probably thinking “crap another notification from this guy” I just wanted to say I GOT IT. I did some looking around, and taking what little that other forum helped me with. I actually just had to put 2 lines, and change my handle that dealt with the modals.
{this.state.selectedRecipe.directions && this.state.selectedRecipe.directions.map((direction, index) => <li>{direction}</li>)}
Same thing for the ingredients. I have tested it, and it works with the edit, and add!! Just wanted to say thank you for all the help you have given me here
@camperextraordinaire here you go https://codepen.io/cody-biggs/pen/jvpGVN
The only thing is the way its set up i guess is you have to reclick on the recipe you made the edit to, to see the change. kind of annnoying
Oh everything is split by comma. I am probably going to change that, but it was just used for testing