diff --git a/src/content/reference/react-dom/hooks/useFormStatus.md b/src/content/reference/react-dom/hooks/useFormStatus.md index 70feceaea..e6841cb4e 100644 --- a/src/content/reference/react-dom/hooks/useFormStatus.md +++ b/src/content/reference/react-dom/hooks/useFormStatus.md @@ -5,13 +5,13 @@ canary: true -The `useFormStatus` Hook is currently only available in React's Canary and experimental channels. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels). +El Hook `useFormStatus` está actualmente disponible solo en React Canary y canales experimentales. Aprende más sobre los [canales de lanzamiento de React aquí](/community/versioning-policy#all-release-channels). -`useFormStatus` is a Hook that gives you status information of the last form submission. +`useFormStatus` es un Hook que brinda información de estado del último formulario enviado. ```js const { pending, data, method, action } = useFormStatus(); @@ -23,11 +23,11 @@ const { pending, data, method, action } = useFormStatus(); --- -## Reference {/*reference*/} +## Referencia {/*reference*/} ### `useFormStatus()` {/*use-form-status*/} -The `useFormStatus` Hook provides status information of the last form submission. +El Hook `useFormStatus` provee información de estado del último formulario enviado. ```js {5},[[1, 6, "status.pending"]] import { useFormStatus } from "react-dom"; @@ -35,7 +35,7 @@ import action from './actions'; function Submit() { const status = useFormStatus(); - return + return } export default function App() { @@ -47,42 +47,42 @@ export default function App() { } ``` -To get status information, the `Submit` component must be rendered within a `
`. The Hook returns information like the `pending` property which tells you if the form is actively submitting. +Para obtener información de estado, el componente de `Enviar` tiene que ser renderizado dentro de un ``. El Hook retorna información como la propiedad `pending` que te dice si el formulario se está enviando activamente. -In the above example, `Submit` uses this information to disable ` ); } @@ -133,30 +133,30 @@ export async function submitForm(query) { -##### `useFormStatus` will not return status information for a `` rendered in the same component. {/*useformstatus-will-not-return-status-information-for-a-form-rendered-in-the-same-component*/} +##### `useFormStatus` no retorna información de estado a un `` renderizado en el mismo componente. {/*useformstatus-will-not-return-status-information-for-a-form-rendered-in-the-same-component*/} -The `useFormStatus` Hook only returns status information for a parent `` and not for any `` rendered in the same component calling the Hook, or child components. +El Hook `useFormStatus` solo retorna información de estado a un `` padre y no para ningún `` renderizado en el mismo componente que llama el Hook, o componentes hijos. ```js function Form() { - // 🚩 `pending` will never be true - // useFormStatus does not track the form rendered in this component + // 🚩 `pending` nunca será true + // useFormStatus no rastrea el formulario renderizado en este componente const { pending } = useFormStatus(); return ; } ``` -Instead call `useFormStatus` from inside a component that is located inside `
`. +En su lugar llama a `useFormStatus` desde dentro de un componente que se encuentra dentro de un ``. ```js function Submit() { - // ✅ `pending` will be derived from the form that wraps the Submit component + // ✅ `pending` se derivará del formulario que envuelve el componente Enviar const { pending } = useFormStatus(); return ; } function Form() { - // This is the `useFormStatus` tracks + // Este es el que `useFormStatus` rastrea return ( @@ -167,11 +167,11 @@ function Form() { -### Read the form data being submitted {/*read-form-data-being-submitted*/} +### Lee los datos del formulario que se envían {/*read-form-data-being-submitted*/} -You can use the `data` property of the status information returned from `useFormStatus` to display what data is being submitted by the user. +Puedes usar la propiedad `data` de la información de estado que retorna del `useFormStatus` para mostrar qué datos está siendo enviando por el usuario. -Here, we have a form where users can request a username. We can use `useFormStatus` to display a temporary status message confirming what username they have requested. +Aquí, tenemos un formulario donde los usuarios pueden solicitar un nombre de usuario. Podemos usar `useFormStatus` para mostrar temporalmente un mensaje de estado que confirme qué nombre de usuario han solicitado. @@ -184,13 +184,13 @@ export default function UsernameForm() { return (
-

Request a Username:

+

Solicita un nombre de usuario:


-

{data ? `Requesting ${data?.get("username")}...`: ''}

+

{data ? `Solicitando ${data?.get("username")}...`: ''}

); } @@ -249,12 +249,12 @@ button { --- -## Troubleshooting {/*troubleshooting*/} +## Solución de problemas {/*troubleshooting*/} -### `status.pending` is never `true` {/*pending-is-never-true*/} +### `status.pending` nunca es `true` {/*pending-is-never-true*/} -`useFormStatus` will only return status information for a parent ``. +`useFormStatus` solo retornará información de estado a un `` padre. -If the component that calls `useFormStatus` is not nested in a ``, `status.pending` will always return `false`. Verify `useFormStatus` is called in a component that is a child of a `` element. +Si el componente que llama a `useFormStatus` no está anidado en un ``, `status.pending` siempre retornará `false`. Verifica que `useFormStatus` está siendo llamado en un componente que es hijo de un elemento ``. -`useFormStatus` will not track the status of a `` rendered in the same component. See [Pitfall](#useformstatus-will-not-return-status-information-for-a-form-rendered-in-the-same-component) for more details. +`useFormStatus` no rastreará al estado de un `` renderizado en el mismo componente. Mira [Atención](#useformstatus-will-not-return-status-information-for-a-form-rendered-in-the-same-component) para más detalles.