I need help with Recipe Box

#1

Hey everyone. I have been racking my brain trying to figure out the issue with my React Recipe Box. I have searched through every part of the code to find the cause of the issue, but I have wasted far too many hours staring at my code. I also requested help in the Gitter chat a few time, but the responses were rare.
Whenever I fix an error, a new one arises. And after a few iterations, I get the same error I got in the beginning of the day. “Back to square one! :pensive:” I have wasted two days doing the same. And now I’m exhausted.

  1. Buttons randomly don’t work
  2. If I comment few cases in the modifyRecipe() the other cases work fine. But not together
    I want to move onto next project or learn more about React. But I’m stuck and for the last two days I’ve learned nothing useful.
    Here is the link to my project : React Recipe Box
    The text is editable with a click on the text itself. For adding use the the large + to add a recipe and small + to add an ingredient. For deletion options use the pencil icon. Also the text is horizontally scrollable.
    Help me please.
#2

It looks stylish but it seems you cannot type in any text for a new recipe.
I see a problem now. You have the modifyRecipe function which changes depending on what the user does. In each case you have a set state this.setState({ myRecipeBox });
This will force a rerender every time the event is fired for example when the user is typing a new ingredient for every keystroke the user is forcing a re-render.
eg) for “Saffron”, 7 letters so 7 re-renders.
I suggest using a “SAVE CHANGES” button and do the setState on the button press event.

1 Like
#3

I’ve been having a go at improving your code.
I’m not finished but have made some progress:

Note that I have added IDs to the recipes. The reason is that although each recipe should have a different name, there is a possibility that 2 recipes have the same name. Giving IDs solves this issue.

1 Like
#4

Hey @JohnnyBizzel, thanks for looking into this matter. I appreciate you have improved the code. Sorry for the late reply but I had a very hard time making that code function properly, so I created a new Recipe Box from the start. I have fundamentally replaced most of the functional aspect of the code, while retaining the look. But it seems like trouble is not leaving me :sweat_smile: .The ingredients are not showing up yet. And I still have to figure out how I can edit the text in the same way as we can change the pen names in CodePen. That way it won’t re-render at every letter like you said. Also I have also added IDs to recipes like you did. I hope I complete this soon.

#5

Not sure about the edit names on codepen style. I recommend keeping things simple to begin with and then trying to do clever stuff.
The save event should be separate from the typing event.

#6

@JohnnyBizzel I have made some progress with this one. It’s almost complete. One issue I’m facing though is that I can’t edit more than I character right now. Can you help me with that?

#7

Same problem as before:

<input  className = "recipe-name-input"
	onChange = { this.handleNameUpdate }
	value = { this.props.name } />

on change of the text box

	updateRecipe(index, name, ingredients) {
		let { recipes } = this.state;
		recipes[index].name = name;
		recipes[index].ingredients = ingredients;
		this.saveRecipes(recipes);
		console.log(JSON.stringify(recipes));
	}

you update the state.
The state should get updated on the save event.

#8

I would also recommend using refs.
I have done the editing of the header using that method.
this.props.handleChange('modifyName', this.props.id, this.refs.recName.value); line 293

        <input 
          className = 'recipe-name' ref="recName"
          value = { this.state.recipeName }
          onChange = { this.modifyName }>

ref comes from the attribute.

#9