Skip to content

Commit 0d5c676

Browse files
Radaplscarburo
andauthored
docs: Add translate file to <option> section (#648)
* docs: Add translate file to <option> section * Update option.md * Apply suggestions from code review --------- Co-authored-by: Rainer Martinez <rmartinezfraga@yandex.com>
1 parent 4acb85e commit 0d5c676

File tree

1 file changed

+23
-24
lines changed
  • beta/src/content/reference/react-dom/components

1 file changed

+23
-24
lines changed

beta/src/content/reference/react-dom/components/option.md

Lines changed: 23 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ title: "<option>"
44

55
<Intro>
66

7-
The [built-in browser `<option>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option) lets you render an option inside a [`<select>`](/reference/react-dom/components/select) box.
7+
El [componente integrado `<option>` del navegador](https://developer.mozilla.org/es/docs/Web/HTML/Element/option) te permite mostrar una opción dentro de un cuadro [`<select>`](/reference/react-dom/components/select).
88

99
```js
1010
<select>
11-
<option value="someOption">Some option</option>
12-
<option value="otherOption">Other option</option>
11+
<option value="someOption">Alguna opción</option>
12+
<option value="otherOption">Otra opción</option>
1313
</select>
1414
```
1515

@@ -19,44 +19,44 @@ The [built-in browser `<option>` component](https://developer.mozilla.org/en-US/
1919

2020
---
2121

22-
## Reference {/*reference*/}
22+
## Referencia {/*reference*/}
2323

2424
### `<option>` {/*option*/}
2525

26-
The [built-in browser `<option>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) lets you render an option inside a [`<select>`](/reference/react-dom/components/select) box.
26+
El [componente integrado `<option>` del navegador](https://developer.mozilla.org/es/docs/Web/HTML/Element/option) te permite mostrar una opción dentro de un cuadro [`<select>`](/reference/react-dom/components/select).
2727

2828
```js
2929
<select>
30-
<option value="someOption">Some option</option>
31-
<option value="otherOption">Other option</option>
30+
<option value="someOption">Alguna opción</option>
31+
<option value="otherOption">Otra opción</option>
3232
</select>
3333
```
3434

35-
[See more examples below.](#usage)
35+
[Mira más ejemplos a continuación.](#usage)
3636

3737
#### Props {/*props*/}
3838

39-
`<option>` supports all [common element props.](/reference/react-dom/components/common#props)
39+
`<option>` es compatible con todas las [props de elementos comunes.](/reference/react-dom/components/common#props)
4040

41-
Additionally, `<option>` supports these props:
41+
Además, `<option>` admite estas props:
4242

43-
* [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option#disabled): A boolean. If `true`, the option will not be selectable and will appear dimmed.
44-
* [`label`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option#label): A string. Specifies the meaning of the option. If not specified, the text inside the option is used.
45-
* [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option#value): The value to be used [when submitting the parent `<select>` in a form](/reference/react-dom/components/select#reading-the-select-box-value-when-submitting-a-form) if this option is selected.
43+
* [`disabled`](https://developer.mozilla.org/es/docs/Web/HTML/Element/option#attr-disabled): Un booleano. Si es `verdadero`, la opción no se podrá seleccionar y aparecerá atenuada.
44+
* [`label`](https://developer.mozilla.org/es/docs/Web/HTML/Element/option#attr-label): Una string. Especifica el significado de la opción. Si no se especifica, se utiliza el texto dentro de la opción.
45+
* [`value`](https://developer.mozilla.org/es/docs/Web/HTML/Element/option#attr-value: El valor que se usará [al enviar el `<select>` padre en un formulario](/reference/react-dom/components/select#reading-the-select-box-value-when-submitting-a-form) si se selecciona esta opción.
4646

47-
#### Caveats {/*caveats*/}
47+
#### Advertencias {/*caveats*/}
4848

49-
* React does not support the `selected` attribute on `<option>`. Instead, pass this option's `value` to the parent [`<select defaultValue>`](/reference/react-dom/components/select#providing-an-initially-selected-option) for an uncontrolled select box, or [`<select value>`](/reference/react-dom/components/select#controlling-a-select-box-with-a-state-variable) for a controlled select box.
49+
* React no admite el atributo `selected` en `<option>`. En su lugar, pasa el `value` de esta opción al padre [`<select defaultValue>`](/reference/react-dom/components/select#providing-an-initially-selected-option) para un cuadro de selección no controlado, o [`<select value>`](/reference/react-dom/components/select#controlling-a-select-box-with-a-state-variable) para un cuadro de selección controlado.
5050

5151
---
5252

53-
## Usage {/*usage*/}
53+
## Uso {/*usage*/}
5454

55-
### Displaying a select box with options {/*displaying-a-select-box-with-options*/}
55+
### Mostrar un cuadro de selección con opciones {/*displaying-a-select-box-with-options*/}
5656

57-
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.
57+
Representa un `<select>` con una lista de componentes `<option>` dentro para mostrar un cuadro de selección. Asigna a cada `<option>` un `value` que represente los datos que se enviarán con el formulario.
5858

59-
[Read more about displaying a `<select>` with a list of `<option>` components.](/reference/react-dom/components/select)
59+
[Obtén más información sobre cómo mostrar un `<select>` con una lista de componentes `<option>`.](/reference/react-dom/components/select)
6060

6161
<Sandpack>
6262

@@ -66,9 +66,9 @@ export default function FruitPicker() {
6666
<label>
6767
Pick a fruit:
6868
<select name="selectedFruit">
69-
<option value="apple">Apple</option>
70-
<option value="banana">Banana</option>
71-
<option value="orange">Orange</option>
69+
<option value="manzana">Manzana</option>
70+
<option value="banano">Banano</option>
71+
<option value="naranja">Naranja</option>
7272
</select>
7373
</label>
7474
);
@@ -79,5 +79,4 @@ export default function FruitPicker() {
7979
select { margin: 5px; }
8080
```
8181

82-
</Sandpack>
83-
82+
</Sandpack>

0 commit comments

Comments
 (0)