Remix Fundamentals

Multiple Forms Exercise

Kent C. Dodds

Kent C. Dodds

Professional Trainer
Remix Fundamentals

Check out a free preview of the full Remix Fundamentals course

The "Multiple Forms Exercise" Lesson is part of the full, Remix Fundamentals course featured in this preview video. Here's what you'd learn in this lesson:

Students are instructed to add a "delete" button to the post creation page and have the "create" button change to an "update" button when editing an existing post.

Preview
Close

Transcript from the "Multiple Forms Exercise" Lesson

[00:00:00]
>> Let's say node dev 7. Should be on port 4007 and in read me 07. Multiple forms, exercise 7, I did one thing for you to change the app that I need you to know about and that is I moved our routes just a tiny bit. So in admin, we no longer have a new route, we have a slug route.

[00:00:32]
This login route is going to handle loading data for the post that we're looking at. But if the slug is new, then it just renders or it sends back a post of null. So that's how we're gonna just reuse this route. Typically, you don't do that typically for sharing code, you're gonna put this component in this file and then you import it from both.

[00:00:55]
But this just made so much sense to me that I went with this direction. This is how I develop software. I implement it twice, I choose the one I hate the least. This is the one I hated the least. So that's what we're going with today. But that's pretty much all I changed.

[00:01:12]
I added, of course, the ability to load that post and then display it in our form. And so I added this default value prop as well as this key prop. So that as you're navigating between these two that value will update to whatever the one is. But you'll notice that this still says create post and I cannot edit this slug.

[00:01:39]
So if I try that then well, it says Slug is required. It also just won't work cuz the database is like, hey, you're trying to create something that has already got an idea of this thing. So we're not gonna be able to do that. Your job is to make it so that when I'm on or rendering this and I have post data that this should say update post and the action should actually update the post.

[00:02:02]
And then if I'm on a new, and also that it should have a delete button. So you're gonna implement the delete button as well. And then when I'm on the new post page, it should still say create posts and still work the way that it always has.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now