Cody Biggs

Ranch Hand
+ Follow
since Jun 21, 2016
Cows and Likes
Cows
Total received
3
In last 30 days
0
Total given
0
Likes
Total received
7
Received in last 30 days
0
Total given
4
Given in last 30 days
0
Forums and Threads
Scavenger Hunt
expand Ranch Hand Scavenger Hunt
expand Greenhorn Scavenger Hunt

Recent posts by Cody Biggs

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
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
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?
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
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
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.
So your suggestion on what I should change? Would that have to do with changing my map?
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
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
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
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


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

fixed it. Did not have .bind on my handleAddSubmit in the constructor...which could have been avoided if I used the arrow functions like you suggested bear. I will change those, only been working with react seriously now for a few weeks. Hopefully this will click pretty soon
So I got it working (kinda) the inputs look like they are no longer linked, but when I try to add a new obj to the array nothing happens. If i console.log though it shows the name: has been added, but still as a empty string and not the value entered in the textbox. I have my map mapping out names: already so my though was once the button is clicked it gets added to the array, and should show up with tacos, and pizza that are already rendered in a list

So, one name would be “input” which would go with my input state. There would be no other name for my other input. For creating new input I meant like creating another input in state for the input that does not have state to go with it