Form field content isn't updating

[bmaupin]

I'm completely new to Remix. I'm following the blog tutorial and trying to do the "homework" portion at the end, which is to create an edit page for the posts, which I've done here: https://github.com/bmaupin/remix-test/blob/main/app/routes/admin/%24slug.tsx

It works, but I'm seeing weird behaviour:

• When I first browse the page to edit a post, if I switch to another post to edit, the form field content doesn't change to reflect that post's content
• If I reload the page, the post's content shows up properly, but then when I switch to a different post, only the title and slug update, not the markdown
• If I disable JavaScript, everything works as expected
• I put a console.log in EditPost that only gets called either when I refresh the page or when I disable JavaScript

You can see it for yourself here: https://bmaupin-remix-test.herokuapp.com/admin

I tested in Chrome and Firefox with two different hosting providers, and I see the same behaviour when I'm running it locally.

My guess is I've done something wrong but I'm not sure what.

Thanks!

[sergiodxa]

The problem is you are using defaultValue to set the values from the loader, but because the transition happens with JS React is ignoring changes in those values, what you can do is to use the useLocation to get the location.key and force a re-mount of the inputs after a navigation.

let { initialValue } = useLoaderData()
let location = useLocation()
return <input key={location.key} name="something" defaultValue={initialValue} />

That way, after a route transition the location.key will change and React will re-mount the input using the new defaultValue.

You can put the key in the Form to force a re-mount of everything.

[bmaupin]

@sergiodxa I'm guessing you meant this? There doesn't seem to be a key property on the transition.

const location = useLocation();
return <input key={location.key} name="something" defaultValue={initialValue} />

That's what I did (well, I did it on the whole Form because I'm being lazy: bmaupin/remix-test@185b6bf) and it worked. Thanks so much!

[sergiodxa]

Yes, I meant location, I fixed my comments, sorry for the confusion 🙏