Creating a Dynamically Controlled Form in React: Additional Parts

In my previous articles, I talked about how to build a dynamically controlled form on the frontend and how to save that data to the backend. In this last installment, I’ll go over the final piece to make this form possible: the API call and additional parts needed.

Posting a recipe

For simplicity’s sake, the API call to post a recipe is stored at the App level.

The constructor holds information for our user as well as our recipes.

constructor() {
    super();
    this.state = {
      auth: {
        user: {},
        recipes: [], 
      }
    };
  }

Data from the form is stored in a newRecipe object. For additional security, the user_id could be changed to something else, such as their access token.

let newRecipe = {
   title: newRecipeState.title,
   summary: newRecipeState.summary,
   ingredients: newRecipeState.ingredients,
   steps: newRecipeState.steps,
   tags: newRecipeState.tags,
   user_id: this.state.auth.user.id
 }

Then, that data is sent to the backend. I use a console.log to verify the data I’m working with when in the testing phase, but this should be taken out for the final product.

 return fetch("http://localhost:3000/api/v1/recipes", {
   method: "POST",
   headers: {
     "Content-Type": "application/json",
     Accept: "application/json",
     Authorization: localStorage.getItem("token")
   },
   body: JSON.stringify(newRecipe)
 })
 .then(resp => resp.json())
 .then(data =>
   console.log(data))
 }

I’ve used the browser router library to display the different components and pass down props and functions in the render method.

<Route
           exact
           path='/add-recipe'
           render={props => <AddRecipeForm {...props} onAddRecipe={this.addRecipe}/>}
         />

Editing a recipe

The editing API call follows similar logic. The recipe’s id is needed to update its information.

 editRecipe = (recipe_id, editRecipeState) => {

   let editedRecipe = {
     title: editRecipeState.title,
     summary: editRecipeState.summary,
     ingredients: editRecipeState.ingredients,
     steps: editRecipeState.steps,
     tags: editRecipeState.tags,
     user_id: this.state.auth.user.id


   }
   return fetch(`http://localhost:3000/api/v1/recipes/${recipe_id}`,{
     method: "PATCH",
     headers: {
       "Content-Type": "application/json",
     Accept: "application/json",
     Authorization: localStorage.getItem("token")
     },
     body: JSON.stringify(editedRecipe)
    }).then(resp => resp.json())
       .then(data =>
         (data))
 }

In addition, the edit route also relies on the id path.

   <Route
           path='/recipes/edit/:id'
           render={props => <EditForm {...props} appState={this.state} onEditRecipe = {this.editRecipe}/>}
           />

Now that we can post and edit a recipe, we ought to be able to view it as well. Although I originally wrote this series to specifically talk about form creation, it’s important to consider how all the pieces work together to create a functional site.

The good news is that viewing the recipes is the most straightforward part of the site. Write a fetch function to populate the state with recipes.

fetchRecipes = () =>{
    api.recipes.getRecipes().then(data => {
      this.setState({
        recipes: data
      })
    })
  }

Tie the fetch to componentDidMouth lifecycle method.

componentDidMount(){
   this.fetchRecipes()
}

In addition, write the logic to render a list of recipes and a single recipe.

 <Route
             exact
             path='/recipes'
             render={props => <RecipeList {...props} appState={this.state}/>}
           />

           <Route
           exact
           path='/recipes/:id'
           render={props => <RecipeDetail {...props} appState={this.state}/>}
           />

Food for thought

I made this before learning about Redux and other state management tools. Hooks, for instance, could also make the codebase much cleaner and manageable. If you’re implementing a pure React app that uses classes, the previous functions provide a good starting point. However, the overall logic for creating a dynamically controlled form should remain the same no matter which tools you use.