From 9b2d772f8d2883ed5f21c49620c865249541e144 Mon Sep 17 00:00:00 2001
From: carlos-garcia-dev <contacto.dvlpr@protonmail.com>
Date: Wed, 22 Mar 2023 18:57:16 +0100
Subject: [PATCH 1/2] Translate select

---
 .../reference/react-dom/components/select.md  | 222 +++++++++---------
 1 file changed, 111 insertions(+), 111 deletions(-)

diff --git a/beta/src/content/reference/react-dom/components/select.md b/beta/src/content/reference/react-dom/components/select.md
index de351d394..0b3064f95 100644
--- a/beta/src/content/reference/react-dom/components/select.md
+++ b/beta/src/content/reference/react-dom/components/select.md
@@ -4,12 +4,12 @@ title: "<select>"
 
 <Intro>
 
-The [built-in browser `<select>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) lets you render a select box with options.
+El [componente nativo del navegador `<select>`](https://developer.mozilla.org/es/docs/Web/HTML/Element/select) te permite renderizar un recuadro select con opciones.
 
 ```js
 <select>
-  <option value="someOption">Some option</option>
-  <option value="otherOption">Other option</option>
+  <option value="someOption">Una opción</option>
+  <option value="otherOption">Otra opción</option>
 </select>
 ```
 
@@ -19,68 +19,68 @@ The [built-in browser `<select>` component](https://developer.mozilla.org/en-US/
 
 ---
 
-## Reference {/*reference*/}
+## Referencia {/*reference*/}
 
 ### `<select>` {/*select*/}
 
-To display a select box, render the [built-in browser `<select>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) component.
+Para mostrar un recuadro de selección, renderiza el componente [nativo del navegador `<select>`](https://developer.mozilla.org/es/docs/Web/HTML/Element/select).
 
 ```js
 <select>
-  <option value="someOption">Some option</option>
-  <option value="otherOption">Other option</option>
+  <option value="someOption">Una opción</option>
+  <option value="otherOption">Otra opción</option>
 </select>
 ```
 
-[See more examples below.](#usage)
+[Ver más ejemplos a continuación.](#usage)
 
 #### Props {/*props*/}
 
-`<select>` supports all [common element props.](/reference/react-dom/components/common#props)
+`<select>` soporta todos los [elementos prop comunes.](/reference/react-dom/components/common#props)
 
-You can [make a select box controlled](#controlling-a-select-box-with-a-state-variable) by passing a `value` prop:
+Puedes [hacer un recuadro de selección controlado](#controlling-a-select-box-with-a-state-variable) al pasar una prop `value`:
 
-* `value`: A string (or an array of strings for [`multiple={true}`](#enabling-multiple-selection)). Controls which option is selected. Every value string match the `value` of some `<option>` nested inside the `<select>`.
+* `value`: Un string (o un array de strings para [`multiple={true}`](#enabling-multiple-selection)). Controla que opción se ha seleccionado. Cada string value coincide con el `value` de alguna `<option>` anidada dentro del `<select>`.
 
-When you pass `value`, you must also pass an `onChange` handler that updates the passed value.
+Cuando pases un `value`, tienes que incluir también un handler `onChange` que actualice el valor que has pasado.
 
-If your `<select>` is uncontrolled, you may pass the `defaultValue` prop instead:
+Si tu `<select>` es no controlado, deberías incluir en su lugar el prop `defaultValue`:
 
-* `defaultValue`: A string (or an array of strings for [`multiple={true}`](#enabling-multiple-selection)). Specifies [the initially selected option.](#providing-an-initially-selected-option)
+* `defaultValue`: Un string (o un array de strings para [`multiple={true}`](#enabling-multiple-selection)). Especifica [la opción inicial seleccionada.](#providing-an-initially-selected-option)
 
-These `<select>` props are relevant both for uncontrolled and controlled select boxs:
+Estas props `<select>` son relevantes para ambos recuadros de selección no controlados y controlados:
 
-* [`autoComplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-autocomplete): A string. Specifies one of the possible [autocomplete behaviors.](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values)
-* [`autoFocus`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-autofocus): A boolean. If `true`, React will focus the element on mount.
-* `children`: `<select>` accepts [`<option>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option), [`<optgroup>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup), and [`<datalist>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup) components as children. You can also pass your own components as long as they eventually render one of the allowed components. If you pass your own components that eventually render `<option>` tags, each `<option>` you render must have a `value`.
-* [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-disabled): A boolean. If `true`, the select box will not be interactive and will appear dimmed.
-* [`form`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-form): A string. Specifies the `id` of the `<form>` this select box belongs to. If omitted, it's the closest parent form.
-* [`multiple`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-multiple): A boolean. If `true`, the browser allows [multiple selection.](#enabling-multiple-selection)
-* [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-name): A string. Specifies the name for this select box that's [submitted with the form.](#reading-the-select-box-value-when-submitting-a-form)
-* `onChange`: An [`Event` handler](/reference/react-dom/components/common#event-handler) function. Required for [controlled select boxes.](#controlling-a-select-box-with-a-state-variable) Fires immediately when the user picks a different option. Behaves like the browser [`input` event.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)
-* `onChangeCapture`: A version of `onChange` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onInput`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event): An [`Event` handler](/reference/react-dom/components/common#event-handler) function. Fires immediately when the value is changed by the user. For historical reasons, in React it is idiomatic to use `onChange` instead which works similarly.
-* `onInputCapture`: A version of `onInput` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onInvalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event): An [`Event` handler](/reference/react-dom/components/common#event-handler) function. Fires if an input fails validation on form submit. Unlike the built-in `invalid` event, the React `onInvalid` event bubbles.
-* `onInvalidCapture`: A version of `onInvalid` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`required`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-required): A boolean. If `true`, the value must be provided for the form to submit.
-* [`size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-size): A number. For `multiple={true}` selects, specifies the preferred number of initially visible items.
+* [`autoComplete`](https://developer.mozilla.org/es/docs/Web/HTML/Element/select#attr-autocomplete): Un string. Especifica uno de los posibles [comportamientos de autocompletado.](https://developer.mozilla.org/es/docs/Web/HTML/Element/select#attr-autocomplete)
+* [`autoFocus`](https://developer.mozilla.org/es/docs/Web/HTML/Element/select#attr-autofocus): Un booleano. Si es `true`, React enfocará el elemento en su mountaje.
+* `children`: `<select>` acepta [`<option>`](https://developer.mozilla.org/es/docs/Web/HTML/Element/option), [`<optgroup>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup) y el componente [`<datalist>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup) como children. También puedes pasarle tus propios componentes siempre y cuando ellos rendericen eventualmente uno de los componentes aceptados. Si pasas tus propios componentes que eventualmente rendericen la etiqueta `<option>`, cada `<option>` que renderices debe tener un `value`.
+* [`disabled`](https://developer.mozilla.org/es/docs/Web/HTML/Element/select#attr-disabled): Un booleano. Si es `true`, el recuadro de selección no será interactivo y aparecerá atenuado.
+* [`form`](https://developer.mozilla.org/es/docs/Web/HTML/Element/select#attr-form): Un string. Especifica el `id` del `<form>` al que pertenece este recuadro de selección. Si se omite, es al form padre más próximo.
+* [`multiple`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-multiple): Un booleano. Si es `true`, el navegador permite [selección múltiple.](#enabling-multiple-selection)
+* [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-name): Un string. Especifica el nombre de este recuadro de selección que será enviado[con el submitt del form.](#reading-the-select-box-value-when-submitting-a-form)
+* `onChange`: Una función [`Event` handler](/reference/react-dom/components/common#event-handler). Necesaria para los [recuadros de selección controlados.](#controlling-a-select-box-with-a-state-variable) Se ejecuta inmediatamente cuando el usuario elige una opción diferente. Se comporta como el [evento `input`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) del navegador.
+* `onChangeCapture`: Una versión de `onChange` que se ejecuta en la [fase de captura.](/learn/responding-to-events#capture-phase-events)
+* [`onInput`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event): Una función [`Event` handler](/reference/react-dom/components/common#event-handler). Se ejecuta inmediatamente cuando el valor es cambiado por el usuario. Por razones históricas, en React es propio al lenguaje usar `onChange` en su lugar que funciona de forma similar.
+* `onInputCapture`: Una versión de `onInput` que se ejecuta en la [fase de captura.](/learn/responding-to-events#capture-phase-events)
+* [`onInvalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event): Una función [`Event` handler](/reference/react-dom/components/common#event-handler). Se ejecuta si un input falla en la validación en el envío de un formulario. A diferencia del evento nativo `invalid`, el evento `onInvalid` de React se propaga.
+* `onInvalidCapture`: Una versión de `onInvalid` que se ejecuta en la [fase de captura.](/learn/responding-to-events#capture-phase-events)
+* [`required`](https://developer.mozilla.org/es/docs/Web/HTML/Element/select#attr-required): Un booleano. Si es `true`, el valor tiene que ser incluido por el formulario para que se envíe.
+* [`size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-size): Un número. Para selecciones de `multiple={true}`, especifica el número escogido de elementos visibles inicialmente.
 
-#### Caveats {/*caveats*/}
+#### Advertencias {/*caveats*/}
 
-- Unlike in HTML, passing a `selected` attribute to `<option>` is not supported. Instead, use [`<select defaultValue>`](#providing-an-initially-selected-option) for uncontrolled select boxes and [`<select value>`](#controlling-a-select-box-with-a-state-variable) for controlled select boxes.
-- If a select box receives a `value` prop, it will be [treated as controlled.](#controlling-a-select-box-with-a-state-variable)
-- A select box can't be both controlled and uncontrolled at the same time.
-- A select box cannot switch between being controlled or uncontrolled over its lifetime.
-- Every controlled select box needs an `onChange` event handler that synchronously updates its backing value.
+- A diferencia de en HTML, pasar un atributo `selected` a `<option>` no está soportado. En su lugar, usa [`<select defaultValue>`](#providing-an-initially-selected-option) para recuadros de selección no controlados y [`<select value>`](#controlling-a-select-box-with-a-state-variable) para recuadros de selección controlados.
+- Si un recuadro de selección recibe una prop `value` será [tratado como controlado.](#controlling-a-select-box-with-a-state-variable)
+- Un recuadro de selección no puede ser controlado y no controlado al mismo tiempo.
+- Un recuadro de selección no puede cambiar entre controlado y no controlado durante su ciclo de vida.
+- Cada recuadro de selección necesita un event handler `onChange` que actualice de forma síncrona su valor permitido.
 
 ---
 
-## Usage {/*usage*/}
+## Uso {/*usage*/}
 
-### Displaying a select box with options {/*displaying-a-select-box-with-options*/}
+### Muestra un recuadro de selección con opciones {/*displaying-a-select-box-with-options*/}
 
-Render a `<select>` with a list of `<option>` components inside to display a select box. Give each `<option>` a `value` representing the data to be submitted with the form.
+Renderiza un `<select>` con una lista de componentes `<option>` dentro para mostrar un recuadro de selección. Da a cada `<option>` un `value` representando los datos que serán enviados en el envío del formulario.
 
 <Sandpack>
 
@@ -88,11 +88,11 @@ Render a `<select>` with a list of `<option>` components inside to display a sel
 export default function FruitPicker() {
   return (
     <label>
-      Pick a fruit:
+      Elige una fruta:
       <select name="selectedFruit">
-        <option value="apple">Apple</option>
-        <option value="banana">Banana</option>
-        <option value="orange">Orange</option>
+        <option value="apple">Manzana</option>
+        <option value="banana">Plátano</option>
+        <option value="orange">Naranja</option>
       </select>
     </label>
   );
@@ -103,15 +103,15 @@ export default function FruitPicker() {
 select { margin: 5px; }
 ```
 
-</Sandpack>  
+</Sandpack>
 
 ---
 
-### Providing a label for a select box {/*providing-a-label-for-a-select-box*/}
+### Incluir una label para un recuadro de selección {/*providing-a-label-for-a-select-box*/}
 
-Typically, you will place every `<select>` inside a [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) tag. This tells the browser that this label is associated with that select box. When the user clicks the label, the browser will automatically focus the select box. It's also essential for accessibility: a screen reader will announce the label caption when the user focuses the select box.
+De forma típica, incluirás cada `<select>` dentro de una etiqueta [`<label>`](https://developer.mozilla.org/es/docs/Web/HTML/Element/label). Esto indica al navegador que esta label está asociada con ese recuadro de selección. Cuando el usuario hace click en la label, el navegador automáticamente enfocará el recuadro de selección. También es esencial para la accesibilidad: un lector de pantalla reproducirá la leyenda de esa label cuando el usuario enfoque el recuadro de selección.
 
-If you can't nest `<select>` into a `<label>`, associate them by passing the same ID to `<select id>` and [`<label htmlFor>`.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor) To avoid conflicts between multiple instances of one component, generate such an ID with [`useId`.](/reference/react/useId)
+Si no puedes anidar un `<select>` en una `<label>`, asócialos al pasarles el mismo ID a `<select id>` y a [`<label htmlFor>`.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor) Para evitar conflictos entre múltiples instancias de un componente, genera ese ID usando [`useId`.](/reference/react/useId)
 
 <Sandpack>
 
@@ -123,21 +123,21 @@ export default function Form() {
   return (
     <>
       <label>
-        Pick a fruit:
+        Elige una fruta:
         <select name="selectedFruit">
-          <option value="apple">Apple</option>
-          <option value="banana">Banana</option>
-          <option value="orange">Orange</option>
+          <option value="apple">Manzana</option>
+          <option value="banana">Plátano</option>
+          <option value="orange">Naranja</option>
         </select>
       </label>
       <hr />
       <label htmlFor={vegetableSelectId}>
-        Pick a vegetable:
+        Elige una verdura:
       </label>
       <select id={vegetableSelectId} name="selectedVegetable">
-        <option value="cucumber">Cucumber</option>
-        <option value="corn">Corn</option>
-        <option value="tomato">Tomato</option>
+        <option value="cucumber">Pepino</option>
+        <option value="corn">Maíz</option>
+        <option value="tomato">Tomate</option>
       </select>
     </>
   );
@@ -153,9 +153,9 @@ select { margin: 5px; }
 
 ---
 
-### Providing an initially selected option {/*providing-an-initially-selected-option*/}
+### Incluir una opción inicial seleccionada {/*providing-an-initially-selected-option*/}
 
-By default, the browser will select the first `<option>` in the list. To select a different option by default, pass that `<option>`'s `value` as the `defaultValue` to the `<select>` element.
+Por defecto, el navegador seleccionará el primer `<option>` de la lista. Para seleccionar otra opción distinta por defecto, incluye ese `value` del `<option>` como el `defaultValue` para el elemento `<select>`.
 
 <Sandpack>
 
@@ -163,11 +163,11 @@ By default, the browser will select the first `<option>` in the list. To select
 export default function FruitPicker() {
   return (
     <label>
-      Pick a fruit:
+      Elige una fruta:
       <select name="selectedFruit" defaultValue="orange">
-        <option value="apple">Apple</option>
-        <option value="banana">Banana</option>
-        <option value="orange">Orange</option>
+        <option value="apple">Manzana</option>
+        <option value="banana">Plátano</option>
+        <option value="orange">Naranja</option>
       </select>
     </label>
   );
@@ -178,19 +178,19 @@ export default function FruitPicker() {
 select { margin: 5px; }
 ```
 
-</Sandpack>  
+</Sandpack>
 
 <Pitfall>
 
-Unlike in HTML, passing a `selected` attribute to an individual `<option>` is not supported.
+A diferencia de en HTML, pasar un atributo `selected` a un `<option>` individual no está soportado.
 
 </Pitfall>
 
 ---
 
-### Enabling multiple selection {/*enabling-multiple-selection*/}
+### Permitir la selección múltiple {/*enabling-multiple-selection*/}
 
-Pass `multiple={true}` to the `<select>` to let the user select multiple options. In that case, if you also specify `defaultValue` to choose the initially selected options, it must be an array.
+Pasa `multiple={true}` al `<select>` para permitir al usuario seleccionar múltiples opciones. En ese caso, si también especificas un `defaultValue` para escoger la opcion inicial seleccionada, debe ser un array.
 
 <Sandpack>
 
@@ -198,15 +198,15 @@ Pass `multiple={true}` to the `<select>` to let the user select multiple options
 export default function FruitPicker() {
   return (
     <label>
-      Pick some fruits:
+      Elige algunas frutas:
       <select
         name="selectedFruit"
         defaultValue={['orange', 'banana']}
         multiple={true}
       >
-        <option value="apple">Apple</option>
-        <option value="banana">Banana</option>
-        <option value="orange">Orange</option>
+        <option value="apple">Manzana</option>
+        <option value="banana">Plátano</option>
+        <option value="orange">Naranja</option>
       </select>
     </label>
   );
@@ -221,50 +221,50 @@ select { display: block; margin-top: 10px; width: 200px; }
 
 ---
 
-### Reading the select box value when submitting a form {/*reading-the-select-box-value-when-submitting-a-form*/}
+### Leer el valor del recuadro de selección al enviar un formulario {/*reading-the-select-box-value-when-submitting-a-form*/}
 
-Add a [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) around your select box with a [`<button type="submit">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) inside. It will call your `<form onSubmit>` event handler. By default, the browser will send the form data to the current URL and refresh the page. You can override that behavior by calling `e.preventDefault()`. To read the form data, use [`new FormData(e.target)`](https://developer.mozilla.org/en-US/docs/Web/API/FormData).
+Añade un [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) que envuelve tu recuadro de selección con un [`<button type="submit">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) dentro. Llamará a tu event handler `<form onSubmit>`. Por defecto, el navegador enviará los datos del formularo a la URL actual y recargará la página. Puedes sobreescribir este comportamiento llamando a `e.preventDefault()`. Para leer los datos del formulario, usa [`new FormData(e.target)`](https://developer.mozilla.org/es/docs/Web/API/FormData).
 <Sandpack>
 
 ```js
 export default function EditPost() {
   function handleSubmit(e) {
-    // Prevent the browser from reloading the page
+    // Evita que el navegador recargue la página
     e.preventDefault();
-    // Read the form data
+    // Lee los datos del formulario
     const form = e.target;
     const formData = new FormData(form);
-    // You can pass formData as a fetch body directly:
+    // Puedes pasar formData como cuerpo del fetch directamente:
     fetch('/some-api', { method: form.method, body: formData });
-    // You can generate a URL out of it, as the browser does by default:
+    // Puedes generar una URL de él, como hace el navegador por defecto:
     console.log(new URLSearchParams(formData).toString());
-    // You can work with it as a plain object.
+    // Puedes trabajar con él como un objeto plano.
     const formJson = Object.fromEntries(formData.entries());
-    console.log(formJson); // (!) This doesn't include multiple select values
-    // Or you can get an array of name-value pairs.
+    console.log(formJson); // (!) Esto no incluye múltiples valores de selección
+    // O puedes obtener un array de pares name-value.
     console.log([...formData.entries()]);
   }
 
   return (
     <form method="post" onSubmit={handleSubmit}>
       <label>
-        Pick your favorite fruit:
+        Elige tu fruta favorita:
         <select name="selectedFruit" defaultValue="orange">
-          <option value="apple">Apple</option>
-          <option value="banana">Banana</option>
-          <option value="orange">Orange</option>
+          <option value="apple">Manzana</option>
+          <option value="banana">Plátano</option>
+          <option value="orange">Naranja</option>
         </select>
       </label>
       <label>
-        Pick all your favorite vegetables:
+        Elige todas tus verduras favoritas:
         <select
           name="selectedVegetables"
           multiple={true}
           defaultValue={['corn', 'tomato']}
         >
-          <option value="cucumber">Cucumber</option>
-          <option value="corn">Corn</option>
-          <option value="tomato">Tomato</option>
+          <option value="cucumber">Pepino</option>
+          <option value="corn">Maíz</option>
+          <option value="tomato">Tomate</option>
         </select>
       </label>
       <hr />
@@ -284,44 +284,44 @@ label { margin-bottom: 20px; }
 
 <Note>
 
-Give a `name` to your `<select>`, for example `<select name="selectedFruit" />`. The `name` you specified will be used as a key in the form data, for example `{ selectedFruit: "orange" }`.
+Da un `name` a tu `<select>`, por ejemplo `<select name="selectedFruit" />`. El `name` que especifiques será usado como key en los datos del formulario, por ejemplo `{ selectedFruit: "orange" }`.
 
-If you use `<select multiple={true}>`, the [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) you'll read from the form will include each selected value as a separate name-value pair. Look closely at the console logs in the example above.
+Si usas `<select multiple={true}>`, el [`FormData`](https://developer.mozilla.org/es/docs/Web/API/FormData) leerás del formulario que incluirá cada valor seleccionado como un par name-value separado. Revisa detenidamente los console logs en el ejemplo de arriba.
 
 </Note>
 
 <Pitfall>
 
-By default, *any* `<button>` inside a `<form>` will submit it. This can be surprising! If you have your own custom `Button` React component, consider returning [`<button type="button">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button) instead of `<button>`. Then, to be explicit, use `<button type="submit">` for buttons that *are* supposed to submit the form.
+Por defecto, *cualquier* `<button>` dentro de un `<form>` lo enviará. ¡Esto puede ser desconcertante! Si tienes tu propio componente customizado de React `Button`, piensa en devolver un [`<button type="button">`](https://developer.mozilla.org/es/docs/Web/HTML/Element/input/button) en lugar de `<button>`. Entonces, para actuar de forma explícita, usa `<button type="submit">` para los buttons que *deben* envíar el formulario.
 
 </Pitfall>
 
 ---
 
-### Controlling a select box with a state variable {/*controlling-a-select-box-with-a-state-variable*/}
+### Controlar un recuadro de selección con una variable de estado {/*controlling-a-select-box-with-a-state-variable*/}
 
-A select box like `<select />` is *uncontrolled.* Even if you [pass an initially selected value](#providing-an-initially-selected-option) like `<select defaultValue="orange" />`, your JSX only specifies the initial value, not the value right now.
+Un recuadro de selección como `<select />` es *no controlado.* Incluso si [incluyes un valor seleccionado inicialmente](#providing-an-initially-selected-option) como `<select defaultValue="orange" />`, tu JSX sólo especifica el valor inicial, no su valor ahora mismo.
 
-**To render a _controlled_ select box, pass the `value` prop to it.** React will force the select box to always have the `value` you passed. Typically, you will control a select box by declaring a [state variable:](/reference/react/useState)
+**Para renderizar un recuadro de selección _controlado_, añádele su prop `value`.** React forzará al recuadro de selección para tener siempre el `value` que pasaste. De forma típica, controlarás un recuadro de selección declarando una [variable de estado:](/reference/react/useState)
 
 ```js {2,6,7}
 function FruitPicker() {
-  const [selectedFruit, setSelectedFruit] = useState('orange'); // Declare a state variable...
+  const [selectedFruit, setSelectedFruit] = useState('orange'); // Declara una variable de estado,...
   // ...
   return (
     <select
-      value={selectedFruit} // ...force the select's value to match the state variable...
-      onChange={e => setSelectedFruit(e.target.value)} // ... and update the state variable on any change!
+      value={selectedFruit} // ...fuerza al valor del select a coincidir con la variable de estado,...
+      onChange={e => setSelectedFruit(e.target.value)} // ...¡y a actualizar la variable de estado con cualquier cambio!
     >
-      <option value="apple">Apple</option>
-      <option value="banana">Banana</option>
-      <option value="orange">Orange</option>
+      <option value="apple">Manzana</option>
+      <option value="banana">Plátano</option>
+      <option value="orange">Naranja</option>
     </select>
   );
 }
 ```
 
-This is useful if you want to re-render some part of the UI in response to every selection.
+Esto es útil si quieres re-renderizar alguna parte de la UI en respuesta a cada selección.
 
 <Sandpack>
 
@@ -334,19 +334,19 @@ export default function FruitPicker() {
   return (
     <>
       <label>
-        Pick a fruit:
+        Elige una fruta:
         <select
           value={selectedFruit}
           onChange={e => setSelectedFruit(e.target.value)}
         >
-          <option value="apple">Apple</option>
-          <option value="banana">Banana</option>
-          <option value="orange">Orange</option>
+          <option value="apple">Manzana</option>
+          <option value="banana">Plátano</option>
+          <option value="orange">Naranja</option>
         </select>
       </label>
       <hr />
       <label>
-        Pick all your favorite vegetables:
+        Elige todas tus verduras favoritas:
         <select
           multiple={true}
           value={selectedVegs}
@@ -356,14 +356,14 @@ export default function FruitPicker() {
             setSelectedVegs(values);
           }}
         >
-          <option value="cucumber">Cucumber</option>
-          <option value="corn">Corn</option>
-          <option value="tomato">Tomato</option>
+          <option value="cucumber">Pepino</option>
+          <option value="corn">Maíz</option>
+          <option value="tomato">Tomate</option>
         </select>
       </label>
       <hr />
-      <p>Your favorite fruit: {selectedFruit}</p>
-      <p>Your favorite vegetables: {selectedVegs.join(', ')}</p>
+      <p>Tu fruta favorita: {selectedFruit}</p>
+      <p>Tus verduras favoritas: {selectedVegs.join(', ')}</p>
     </>
   );
 }
@@ -377,8 +377,8 @@ select { margin-bottom: 10px; display: block; }
 
 <Pitfall>
 
-**If you pass `value` without `onChange`, it will be impossible to select an option.** When you control a select box by passing some `value` to it, you *force* it to always have the value you passed. So if you pass a state variable as a `value` but forget to update that state variable synchronously during the `onChange` event handler, React will revert the select box after every keystroke back to the `value` that you specified.
+**Si pasas un `value` sin un `onChange`, será imposible seleccionar una opción.** Cuando controlas un recuadro de selección al pasarle algún `value`, *fuerzas* que siempre tenga el valor que has pasado. Así que si le incluyes una variable de estado como `value` pero olvidas actualizar esa variable de estado de forma síncrona durante el event handler `onChange`, React revertirá el recuadro de selección después de cada pulsación de tecla de vuelta al `value` que especificaste.
 
-Unlike in HTML, passing a `selected` attribute to an individual `<option>` is not supported.
+A diferencia de HTML, pasar un atributo `selected` a un `<option>` individual no está soportado.
 
 </Pitfall>

From 0673dc7a8a6513e5e9d118a41350c1bf6885c66f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carlos=20Garc=C3=ADa?=
 <61150045+carlos-garcia-dev@users.noreply.github.com>
Date: Mon, 1 May 2023 15:07:41 +0200
Subject: [PATCH 2/2] Translate <select> - updated & fixed typos
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

¡Hola @carburo! Ya he incluido los cambios que indicaste. ¡Muchas gracias por la atención revisando la Pull request! Si hay que hacer más modificaciones, no dudes en decírmelo.
---
 .../reference/react-dom/components/select.md       | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/beta/src/content/reference/react-dom/components/select.md b/beta/src/content/reference/react-dom/components/select.md
index 0b3064f95..564d1a3b8 100644
--- a/beta/src/content/reference/react-dom/components/select.md
+++ b/beta/src/content/reference/react-dom/components/select.md
@@ -40,23 +40,23 @@ Para mostrar un recuadro de selección, renderiza el componente [nativo del nave
 
 Puedes [hacer un recuadro de selección controlado](#controlling-a-select-box-with-a-state-variable) al pasar una prop `value`:
 
-* `value`: Un string (o un array de strings para [`multiple={true}`](#enabling-multiple-selection)). Controla que opción se ha seleccionado. Cada string value coincide con el `value` de alguna `<option>` anidada dentro del `<select>`.
+* `value`: Un string (o un array de strings para [`multiple={true}`](#enabling-multiple-selection)). Controla qué opción se ha seleccionado. Cada valor de string coincide con el `value` de alguna `<option>` anidada dentro del `<select>`.
 
 Cuando pases un `value`, tienes que incluir también un handler `onChange` que actualice el valor que has pasado.
 
-Si tu `<select>` es no controlado, deberías incluir en su lugar el prop `defaultValue`:
+Si tu `<select>` es no controlado, deberías incluir en su lugar la prop `defaultValue`:
 
 * `defaultValue`: Un string (o un array de strings para [`multiple={true}`](#enabling-multiple-selection)). Especifica [la opción inicial seleccionada.](#providing-an-initially-selected-option)
 
 Estas props `<select>` son relevantes para ambos recuadros de selección no controlados y controlados:
 
 * [`autoComplete`](https://developer.mozilla.org/es/docs/Web/HTML/Element/select#attr-autocomplete): Un string. Especifica uno de los posibles [comportamientos de autocompletado.](https://developer.mozilla.org/es/docs/Web/HTML/Element/select#attr-autocomplete)
-* [`autoFocus`](https://developer.mozilla.org/es/docs/Web/HTML/Element/select#attr-autofocus): Un booleano. Si es `true`, React enfocará el elemento en su mountaje.
+* [`autoFocus`](https://developer.mozilla.org/es/docs/Web/HTML/Element/select#attr-autofocus): Un booleano. Si es `true`, React enfocará el elemento en su montaje.
 * `children`: `<select>` acepta [`<option>`](https://developer.mozilla.org/es/docs/Web/HTML/Element/option), [`<optgroup>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup) y el componente [`<datalist>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup) como children. También puedes pasarle tus propios componentes siempre y cuando ellos rendericen eventualmente uno de los componentes aceptados. Si pasas tus propios componentes que eventualmente rendericen la etiqueta `<option>`, cada `<option>` que renderices debe tener un `value`.
 * [`disabled`](https://developer.mozilla.org/es/docs/Web/HTML/Element/select#attr-disabled): Un booleano. Si es `true`, el recuadro de selección no será interactivo y aparecerá atenuado.
 * [`form`](https://developer.mozilla.org/es/docs/Web/HTML/Element/select#attr-form): Un string. Especifica el `id` del `<form>` al que pertenece este recuadro de selección. Si se omite, es al form padre más próximo.
 * [`multiple`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-multiple): Un booleano. Si es `true`, el navegador permite [selección múltiple.](#enabling-multiple-selection)
-* [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-name): Un string. Especifica el nombre de este recuadro de selección que será enviado[con el submitt del form.](#reading-the-select-box-value-when-submitting-a-form)
+* [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-name): Un string. Especifica el nombre de este recuadro de selección que será enviado [con el submit del form.](#reading-the-select-box-value-when-submitting-a-form)
 * `onChange`: Una función [`Event` handler](/reference/react-dom/components/common#event-handler). Necesaria para los [recuadros de selección controlados.](#controlling-a-select-box-with-a-state-variable) Se ejecuta inmediatamente cuando el usuario elige una opción diferente. Se comporta como el [evento `input`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) del navegador.
 * `onChangeCapture`: Una versión de `onChange` que se ejecuta en la [fase de captura.](/learn/responding-to-events#capture-phase-events)
 * [`onInput`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event): Una función [`Event` handler](/reference/react-dom/components/common#event-handler). Se ejecuta inmediatamente cuando el valor es cambiado por el usuario. Por razones históricas, en React es propio al lenguaje usar `onChange` en su lugar que funciona de forma similar.
@@ -190,7 +190,7 @@ A diferencia de en HTML, pasar un atributo `selected` a un `<option>` individual
 
 ### Permitir la selección múltiple {/*enabling-multiple-selection*/}
 
-Pasa `multiple={true}` al `<select>` para permitir al usuario seleccionar múltiples opciones. En ese caso, si también especificas un `defaultValue` para escoger la opcion inicial seleccionada, debe ser un array.
+Pasa `multiple={true}` al `<select>` para permitir al usuario seleccionar múltiples opciones. En ese caso, si también especificas un `defaultValue` para escoger la opción inicial seleccionada, debe ser un array.
 
 <Sandpack>
 
@@ -292,7 +292,7 @@ Si usas `<select multiple={true}>`, el [`FormData`](https://developer.mozilla.or
 
 <Pitfall>
 
-Por defecto, *cualquier* `<button>` dentro de un `<form>` lo enviará. ¡Esto puede ser desconcertante! Si tienes tu propio componente customizado de React `Button`, piensa en devolver un [`<button type="button">`](https://developer.mozilla.org/es/docs/Web/HTML/Element/input/button) en lugar de `<button>`. Entonces, para actuar de forma explícita, usa `<button type="submit">` para los buttons que *deben* envíar el formulario.
+Por defecto, *cualquier* `<button>` dentro de un `<form>` lo enviará. ¡Esto puede ser desconcertante! Si tienes tu propio componente `Button` personalizado, piensa en devolver un [`<button type="button">`](https://developer.mozilla.org/es/docs/Web/HTML/Element/input/button) en lugar de `<button>`. Entonces, para actuar de forma explícita, usa `<button type="submit">` para los buttons que *deben* enviar el formulario.
 
 </Pitfall>
 
@@ -321,7 +321,7 @@ function FruitPicker() {
 }
 ```
 
-Esto es útil si quieres re-renderizar alguna parte de la UI en respuesta a cada selección.
+Esto es útil si quieres volver a renderizar alguna parte de la UI en respuesta a cada selección.
 
 <Sandpack>