Fix server action code example #7202
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Hi @IGassmann! Thank you for your pull request and welcome to our community. Action RequiredIn order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you. ProcessIn order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA. Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks! |
Size changes📦 Next.js Bundle Analysis for react-devThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
IGassmann
changed the title
| @@ -77,7 +77,7 @@ When the bundler builds the `EmptyNote` Client Component, it will create a refer | |||
|
|
|||
| ```js [[1, 2, "createNoteAction"], [1, 5, "createNoteAction"], [1, 7, "createNoteAction"]] | |||
| "use client"; | |||
| import {createNoteAction} from './actions'; | |||
| import { createNoteAction } from './actions'; | |||
There was a problem hiding this comment.
Most of the code examples in the docs have spaces within the brackets.
| "use client"; | ||
|
|
||
| import {updateName} from './actions'; | ||
| import { useState, useTransition } from 'react'; |
There was a problem hiding this comment.
Most of the code examples in the docs imports the used React functions.
|
|
||
| function UpdateName() { | ||
| const [name, setName] = useState(''); |
There was a problem hiding this comment.
The input wasn't using name since it's an uncontrolled input.
| } else { | ||
| setName(''); |
There was a problem hiding this comment.
When the form submission succeeds, React already automatically resets the form. No need to reset manually the input value. However, we need to reset the error.
There was a problem hiding this comment.
"When the form submission succeeds, React already automatically resets the form." sorry where's that claim coming from? In the official docs there's an example doing formRef.current.reset();, I guess exactly because it is not reset by default? (thought seeing the other mistakes there, it might be?).
There was a problem hiding this comment.
It comes from the docs as well.
I believe the example you mention resets the form manually because it's demonstrating optimistic behavior. If it didn't reset manually, it would have to wait for the request to complete for React to reset the form.
There was a problem hiding this comment.
Ah gotcha, thanks! I am just a passerby that was curious about the PR though, cannot review/approve/etc here, but looks good!
| } | ||
| }) | ||
| } | ||
|
|
||
| return ( | ||
| <form action={submitAction}> | ||
| <input type="text" name="name" disabled={isPending}/> | ||
| {state.error && <span>Failed: {state.error}</span>} |
|
i still can't believe that LLM code did it to prod 😭😭😭😭 |
IGassmann
changed the title
IGassmann
changed the title
This fixes the code example in the "Composing Server Actions with Actions" section and updates the imports for all the code examples on the page to ensure consistency with the rest of the documentation.