Recipe Box - Need help with the save button

Recipe Box - Need help with the save button
0
#1

I 'm trying to make a save button that saves the new instructions that you have typed in a <textarea>. When the button is clicked it calls the edit() function passing the value of the <h1> and the <textarea> and the index of the previous recipe to delete it so that there won’t be recipes with the same name. The problem is when there is more than one recipe they shift their names and one recipe gets the instructions of the other. I think maybe there is a problem with the edit() function but I can’t figure it out. Please help!

Here is a link of the app: https://teo03.github.io/recipe_box/
Here is a the source: https://github.com/Teo03/recipe_box

#2

I haven’t thoroughly debugged it, so I’m not certain, but it might be because you’re passing $('#title').text() and $('#instructions').val(). An id is meant to be unique in the markup, but each of your recipes has an h1 with the id title and a textarea with the id instructions. The JavaScript API is (I’m guessing) just picking the first element it finds with that id and calls it a day. You never want to use jQuery in a React project anyways, so just get rid of that entirely. The “React way” to do this is to have your text area update the state at each keyup or change event. Check out this tutorial.

#3

Thanks for the help. I’ve done what you have said and it worked. I have one question, how to delete the previous recipe so there will be just the new edited recipe left. I tried doing this.props.recipes.splice(index, 1) but doesen’t work. Is there another way to do that?
I also added a timeout check it here: https://teo03.github.io/recipe_box/

#4

Modifying props isn’t going to do anything for you. You need to be modifying the state, otherwise React isn’t going to know when or what to update. Also keep in mind that splice can accept replacement objects after the end index.