Donna’s Cookbook; Design Blog Part 2; Live updating values using useState
Welcome back! Last week we discussed the broad strokes of what Donna’s Cookbook is going to be. A place for families to preserve and distribute their personal family recipes. Today I’m going to be discussing the nuts and bolts of my RecipeMaker component and all of its children components.
The RecipeMaker has three levels with the last one being a subdivision. At the very top level, is where all the fetch-posting actions are being done. This is also where the value for the recipe title is being held and updated. Since the technique that I use to live update the recipe values is first introduced here I’ll break it down. This is what the page looks like when you load the recipe maker page.
When the user enters text into the input, the title of the recipe is live updated. Like so:
Now what’s actually happening here. Here’s a look at the code.
This is the JSX for the input. The onChange, handleRecipeTitle, function is what’s important here. Here’s what that function looks like.
What I think is interesting about this function is that the state variable that it is modifying actually has multiple uses. For one, the recipeTitle variable is used to save the value of the recipe title for when the recipe eventually gets posted and saved. More interestingly, this value is being used by a child of RecipeMaker, namely, RecipeDraft. RecipeDraft has no actual use other than to display the values of the recipe as they are added. Right now it’s just a black and white page, but the thought is that eventually this will look like a faded piece of parchment as if a grandparent were actually writing it down in front of their very eyes. The recipeTitle value is passed down into the recipleDraft component as a prop, and passed in as a JSX value under a h1 label.
That’s how my live updating of the recipe title works! Join me next week as I get into how to live update the ingredients and instructions on the RecipeDraft component. This is a little more complicated since the state variable for the recipes is an array values instead of a simple string. Turning these values into a series of JSX elements and then live updating them as the array gets added to turned out to be quite a bit more complicated than I thought it would be. Should be exciting!
