• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Bear Bibeault
  • Devaka Cooray
  • Liutauras Vilda
  • Jeanne Boyarsky
Sheriffs:
  • Knute Snortum
  • Junilu Lacar
  • paul wheaton
Saloon Keepers:
  • Ganesh Patekar
  • Frits Walraven
  • Tim Moores
  • Ron McLeod
  • Carey Brown
Bartenders:
  • Stephan van Hulst
  • salvin francis
  • Tim Holloway

Edit function in react  RSS feed

 
Ranch Hand
Posts: 335
3
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
So, I am just about done with my recipe box app but for the life of me I can not figure out the edit function. I get the selectedRecipe by clicking on it from the list, so for the edit I was given a hint of edit the recipe, and use map to replace the selected recipe with the one I edited. I dont know if im headed in the right direction or not

 
Marshal
Posts: 67164
169
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
That's a lot of code to wade through. Would you care to narrow down the part you are feeling iffy about?
 
Cody Biggs
Ranch Hand
Posts: 335
3
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
yea, sorry about that. So its my edit function to edit the recipe that I cant seem to get. My add, and delete work perfectly but this dang edit part. So once a user selects a recipe, and chooses to edit the recipe a modal will come up with the values of that recipe already in the inputs and text areas that way you dont have to retype everything for an edit. However when I change the values it changes ,but doesnt save. For example if I change Home Made Pizza to cheese pizza the name will change, but it if I click on the recipe again it goes back to the original name

Here is what I had originally for the edit function. I didnt know how to set this into the recipes


What I have now. Someone said to use the index to make sure that im editing the right recipe, which I thought I was doing that with the selectedRecipe? However this gives me an error "Uncaught TypeError: Cannot set property '1' of undefined"



the code where I get the selected recipe, my current edit, and my map just incase


 
Bear Bibeault
Marshal
Posts: 67164
169
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I have a pretty full day today (catching up with all the chores that I've been ignoring all week), so I haven't been able to look at your code in depth. However, with just a quick scan I can see a lot of structural problems.

You have two separate components: one for adding, one for editing. You need only one RecipeForm component that can handle either. The only difference between an add and and edit is that edit is pre-filled with the recipe data, while the add is populated with default values and has no id. Other than that, there really isn't much difference so having two separate components is needless duplication.

This RecipeForm component should be passed a recipe or not in props. If a recipe is provided, it's an edit, if not, it's an add. The recipe (either an existing or a default one), is stored in the state of the component and any changes to the form fields are reflected in the state. When it comes time to save, it's easy to know whether to do an insert or an update (or POST versus PUT, or whatever you are using) by seeing if there is a recipe id or not in the state.

Also, component names AddRecipe and EditRecipe are awful. Methods are named with verbs. Components are nouns. So RecipeForm, not EditRecipe.

I don't know what "someone" meant by "use the index", but doesn't seem to make any sense to me in the context of your code.

I also see some problems with individual lines of code, but it's premature to address those since the structural changes will likely result in a pretty massive changing of the code.

Hope that helps set you in a better direction.
 
Cody Biggs
Ranch Hand
Posts: 335
3
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
So, I was able to figure it out. The last thing is when I click on a recipe I want it to display the recipe and ingredients on their own line. I know I need to toString, split, and join the selected recipe, but the thing is selectedRecipe is undefined until a recipe is clicked on. So I cant just toString it where im rendering the recipe because it will be undefined. I tried doing something the handleRecipe function, but then the recipe would not show

handleRecipe function


and where im rendering it


for the full code
https://codepen.io/cody-biggs/pen/XPEgvX
 
Bear Bibeault
Marshal
Posts: 67164
169
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Nit: items, not ITEMS

In general, when something may be undefined until a later time, you can just check for it and only render if it exists. For example:

The div is rendered only if something evaluates to true, which it will not if it is undefined.
 
Cody Biggs
Ranch Hand
Posts: 335
3
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
So I tried this. added random commas in the ingredients just to make sure it was splitting. At first I tried join("\n") but it never went to a new line, and the <br /> seems to replace the commas in the ingredients
 
Bear Bibeault
Marshal
Posts: 67164
169
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Please break that code up so that no line is longer than the conventional 120 characters (are you not using a linter?). Having to scroll horizontally to read it is just too much work.

I'm not sure why you are doing all the string manipulation work in the first place. If the data is not in a form that is easily consumable in the view, that's something that should be handled before it gets to the view.

In that respect, React (or anything else) is no different than JSP. Supporting code should make sure that the views get that they need; doing handstands in the view is never the right thing.
 
Cody Biggs
Ranch Hand
Posts: 335
3
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Not gonna lie..not sure what that last post was saying   I am trying to split it so the ingredients/directions that look like "cheese, meat, honey, bread, whatever" look like
"cheese"
"meat"
"honey"
"bread"
"whatever

when the recipe is shown
 
Bear Bibeault
Marshal
Posts: 67164
169
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
My post was basically asking why would you send a comma-delimited string that needs to be broken up to a view? That's not a job for the view. It should be broken down into a simple List before it gets to the view.

You are making the view do too much work. There's already enough going on in the view; adding data manipulation to the mix is a flat-out anti-pattern.
 
Cody Biggs
Ranch Hand
Posts: 335
3
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
So your suggestion on what I should change? Would that have to do with changing my map?
 
Bear Bibeault
Marshal
Posts: 67164
169
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
You have a fundamental data problem. It makes no sense to fine tune code until it is fixed.

Where is this comma-delimited string coming from? Why is it a comma-delimited string in the first place? Why is it not already a list?

But if there is no getting around getting it as a comma delimited string, you need to transform the unsuitably formatted data to a list as soon as you get it, before it ends up in the view.
 
Cody Biggs
Ranch Hand
Posts: 335
3
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I’m not sure what you mean by turn it into a list. I have 2 default recipes that I made just to have something in the recipe box when it’s loaded. Each recipe is an object. So the only thing I have experience/knowledge of is to turn the object into a string and split that. Which is why I’m trying to use that logic here.
 
Bear Bibeault
Marshal
Posts: 67164
169
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

Cody Biggs wrote:So the only thing I have experience/knowledge of is to turn the object into a string and split that. Which is why I’m trying to use that logic here.


Herein is the problem. Please explain why you turn objects into strings when what you need are the objects.
 
Cody Biggs
Ranch Hand
Posts: 335
3
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Well in my thinking I need the string because you can’t split an object. Since I was going the split route it made the most sense. I thought about making my ingredients/directions in a map and making them li’s then I could use them in a order or in ordered list. But I wasn’t sure how I could that while keeping my original map that gives the the whole recipe
 
Bear Bibeault
Marshal
Posts: 67164
169
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

Cody Biggs wrote:Well in my thinking I need the string because you can’t split an object.


This makes no sense to me at all. Why do you need to split anything?

Explain where and how the objects get created in the first place.
 
Cody Biggs
Ranch Hand
Posts: 335
3
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I have two recipes objects already made. They are mapped and shown as li’s. When clicked on they display the whole recipe: name, ingredients, and instructions. I didn’t want the instructions/instructions shown as “cheese,bacon,other food” I want them displayed as a list. However this was an after thought after I already did everything. The new recipe objects are added after the add modal is filled out.

Then again when the user enters the info of the new recipe, and that recipe is selected I wanted the ingredients/directions as a list. As of right now I don’t know how to change my original map that maps out the recipe to include the ingredients/directions as li’s
 
Bear Bibeault
Marshal
Posts: 67164
169
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

Cody Biggs wrote:I have two recipes objects already made.


OK, so you have two objects already in memory.

They are mapped and shown as li’s.


So, you display them as a list, probably just by name. Correct?

When clicked on they display the whole recipe


This should be simple. On the click, you figure out which recipe was clicked on and send it to a component to display it.

What's with all the strings and splits and other stuff? It's all completely unnecessary. You already have the list of ingredients in the ingredients property of the object.

I don’t know how to change my original map that maps out the recipe to include the ingredients/directions as li’s



You keep using the noun map  but I don't see any maps in your object shape. What are you referring to when you say "map". You are likely using the wrong term.
 
Cody Biggs
Ranch Hand
Posts: 335
3
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Yea they are shown by name, and the handlerecipe function uses index to tell what recipe was clicked on.

When I say map I am referring to the map that shows my names as a list. If I’m not going to split the object then I need to do the same thing for ingredients/directions as I did for the names?

If so can I do that in the same map? Or if I have to make new maps will that mess up my handlerecipe function?
 
Bear Bibeault
Marshal
Posts: 67164
169
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

Cody Biggs wrote:Yea they are shown by name, and the handlerecipe function uses index to tell what recipe was clicked on.


Index is a poor way to reference the recipes. Each recipe should have a unique id as part of its data and that's how we reference different recipe entities. But for now, lets stick with index, but be aware that's going to be a problem going forward.

When I say map I am referring to the map that shows my names as a list. If I’m not going to split the object then I need to do the same thing for ingredients/directions as I did for the names?



On a click, you set the selected recipe as selectedRecipe in state. That state property now points to everything you need to display the recipe.

If so can I do that in the same map?


Again, you are using the word map incorrectly. The result of using the .map() method (a verb, not a noun) is a list created from the source list. In this case, a list of names. Not a map. A list. A map (noun) is something else completely.

In the component to show the recipe, you would likely use the .map() method on the ingredient list to show each ingredient. Same with recipe directions. That's the conventional way to convert a list of data to display components. So you are on the right track there.

But look at this line:

toString()? Why? This the the big "what the..."!

You have the list of ingredients as an array. Use the .map() method to iterate over the array and display each one individually.

BUT before we go any further, do you really have all of this in one component?      

This should be broken down into many components: RecipeBox (your React app), RecipeList, RecipeListItem, Recipe, RecipeTitle, RecipeDirectionList, RecipeDirection, RecipeIngredientList, RecipeIngredient, and so on...
 
Cody Biggs
Ranch Hand
Posts: 335
3
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Yes, all one component. I am trying to self learn this, so there are probably a lot of stuff im doing wrong compared to someone who has been doing this for several years. I am just going off by what i see in videos, and articles that ive read. So I found a way to show the ingredients, and directions as a list...but that kills my add and edit modal. None of the adds or edits work except for changing the name.

the solution to make them lists


My logic for my add and edit
Add


edit
 
Cody Biggs
Ranch Hand
Posts: 335
3
  • Likes 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Nevermind! I got it working! I just had to use this for both ingredients, and directions, and then a small change to my handle function that handled the input from the modal
 
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!