Skip to content

Conditional Rendering translation #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 12 commits into from
Feb 8, 2019
Merged

Conditional Rendering translation #19

Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
fc80aa3
Rodrigo Ali - First translation work, changes to create the contribut…
ElRodrigote Feb 1, 2019
9647728
Rodrigo Ali - Advances in general translation.
Feb 1, 2019
1ea8762
Rodrigo Ali - Keep on translating. Minor corrections, flagged INLINE …
ElRodrigote Feb 2, 2019
373ffd0
Rodrigo Ali - General translation achieved. TODO: code snippet transl…
ElRodrigote Feb 3, 2019
7165c06
Rodrigo Ali - Code snippets translation and proof reading done. Ready…
ElRodrigote Feb 3, 2019
c4205db
Merge branch 'master' into conditional-rendering-translation
ElRodrigote Feb 3, 2019
8b1a42e
Rodrigo Ali - Fixed indentation issues.
ElRodrigote Feb 3, 2019
4d3d6bf
Rodrigo Ali - Addressing CR comments, reverted some changes, changed …
ElRodrigote Feb 4, 2019
0b0253b
Rodrigo Ali - Minor snippet revertions, fixed links to point spanish …
ElRodrigote Feb 4, 2019
7649fc3
Rodrigo Ali: final revision, all snipets reverted. Spanish grammar fi…
ElRodrigote Feb 4, 2019
c5348a2
Merge branch 'master' of github.com:reactjs/es.reactjs.org into condi…
ElRodrigote Feb 4, 2019
d3e9f9d
Rodrigo Ali - Addressing PR comments regarding snippets words, review…
ElRodrigote Feb 4, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 33 additions & 39 deletions content/docs/conditional-rendering.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
---
id: conditional-rendering
title: Conditional Rendering
title: Renderizado condicional
permalink: docs/conditional-rendering.html
prev: handling-events.html
next: lists-and-keys.html
redirect_from:
- "tips/false-in-jsx.html"
---

In React, you can create distinct components that encapsulate behavior you need. Then, you can render only some of them, depending on the state of your application.
En React, puedes crear distintos componentes que encapsulan el comportamiento que necesitas. Entonces, puedes renderizar solamente algunos de ellos, dependiendo del estado de tu aplicación.

Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) or the [conditional operator](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) to create elements representing the current state, and let React update the UI to match them.
El renderizado condicional en React funciona de la misma forma que lo hacen las condiciones en JavaScript. Usa operadores de JavaScript como [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) o el [operador condicional](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/Conditional_Operator) para crear elementos representando el estado actual, y deja que React actualice la UI para emparejarlos.

Consider these two components:
Considera estos dos componentes:

```js
function UserGreeting(props) {
Expand All @@ -24,7 +24,7 @@ function GuestGreeting(props) {
}
```

We'll create a `Greeting` component that displays either of these components depending on whether a user is logged in:
Vamos a crear un componente `Greeting` que muestra cualquiera de estos componentes dependiendo si el usuario ha iniciado sesión:

```javascript{3-7,11,12}
function Greeting(props) {
Expand All @@ -36,21 +36,21 @@ function Greeting(props) {
}

ReactDOM.render(
// Try changing to isLoggedIn={true}:
// Intentar cambiando isLoggedIn={true}:
<Greeting isLoggedIn={false} />,
document.getElementById('root')
);
```

[**Try it on CodePen**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011)
[**Pruébalo en CodePen**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011)

This example renders a different greeting depending on the value of `isLoggedIn` prop.
Este ejemplo renderiza un saludo diferente según el valor de la prop `isLoggedIn`.

### Element Variables
### Variables de elementos

You can use variables to store elements. This can help you conditionally render a part of the component while the rest of the output doesn't change.
Puedes usar variables para almacenar elementos. Esto puede ayudarte para renderizar condicionalmente una parte del componente mientras el resto del resultado no cambia.

Consider these two new components representing Logout and Login buttons:
Considera estos dos componentes nuevos que representan botones de cierre e inicio de sesión:

```js
function LoginButton(props) {
Expand All @@ -70,9 +70,9 @@ function LogoutButton(props) {
}
```

In the example below, we will create a [stateful component](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) called `LoginControl`.
En el siguiente ejemplo, crearemos un [componente con estado](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) llamado `LoginControl`.

It will render either `<LoginButton />` or `<LogoutButton />` depending on its current state. It will also render a `<Greeting />` from the previous example:
El componente va a renderizar `<LoginButton />` o `<LogoutButton />` dependiendo de su estado actual. También va a renderizar un `<Greeting />` del ejemplo anterior:

```javascript{20-25,29,30}
class LoginControl extends React.Component {
Expand All @@ -82,25 +82,20 @@ class LoginControl extends React.Component {
this.handleLogoutClick = this.handleLogoutClick.bind(this);
this.state = {isLoggedIn: false};
}

handleLoginClick() {
this.setState({isLoggedIn: true});
}

handleLogoutClick() {
this.setState({isLoggedIn: false});
}

render() {
const isLoggedIn = this.state.isLoggedIn;
let button;

if (isLoggedIn) {
button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
button = <LoginButton onClick={this.handleLoginClick} />;
}

return (
<div>
<Greeting isLoggedIn={isLoggedIn} />
Expand All @@ -116,13 +111,13 @@ ReactDOM.render(
);
```

[**Try it on CodePen**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010)
[**Pruébalo en CodePen**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010)

While declaring a variable and using an `if` statement is a fine way to conditionally render a component, sometimes you might want to use a shorter syntax. There are a few ways to inline conditions in JSX, explained below.
Si bien declarar una variable y usar una sentencia `if` es una buena forma de renderizar condicionalmente un componente, a veces podrías querer usar una sintaxis más corta. Hay algunas formas de hacer condiciones en una línea en JSX, explicadas a continuación.

### Inline If with Logical && Operator
### If en una línea con operador lógico &&

You may [embed any expressions in JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) by wrapping them in curly braces. This includes the JavaScript logical `&&` operator. It can be handy for conditionally including an element:
Puedes [embeber cualquier expresión en JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) envolviéndola en llaves. Esto incluye al operador lógico `&&` de JavaScript. Puede ser útil para incluir condicionalmente un elemento:

```js{6-10}
function Mailbox(props) {
Expand All @@ -146,17 +141,17 @@ ReactDOM.render(
);
```

[**Try it on CodePen**](https://codepen.io/gaearon/pen/ozJddz?editors=0010)
[**Pruébalo en CodePen**](https://codepen.io/gaearon/pen/ozJddz?editors=0010)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please update the code in lines 127-147 to match this codepen link as much as possible. I think it's fine to change the content of the JSX but not the component names neither the root node.


It works because in JavaScript, `true && expression` always evaluates to `expression`, and `false && expression` always evaluates to `false`.
Esto funciona porque en JavaScript, `true && expresión` siempre evalúa a `expresión`, y `false && expresión` siempre evalúa a `false`.

Therefore, if the condition is `true`, the element right after `&&` will appear in the output. If it is `false`, React will ignore and skip it.
Por eso, si la condición es `true`, el elemento justo después de `&&` aparecerá en el resultado. Si es `false`, React lo ignorará.

### Inline If-Else with Conditional Operator
### If-Else en una línea con operador condicional

Another method for conditionally rendering elements inline is to use the JavaScript conditional operator [`condition ? true : false`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator).
Otro método para el renderizado condicional de elementos en una línea es usar el operador condicional [`condición ? true : false`](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/Conditional_Operator) de JavaScript.

In the example below, we use it to conditionally render a small block of text.
En el siguiente ejemplo, lo usaremos para renderizar de forma condicional un pequeño bloque de texto.

```javascript{5}
render() {
Expand All @@ -169,7 +164,7 @@ render() {
}
```

It can also be used for larger expressions although it is less obvious what's going on:
También puede usarse para expresiones más grandes, aunque es menos obvio lo que está pasando:

```js{5,7,9}
render() {
Expand All @@ -179,27 +174,26 @@ render() {
{isLoggedIn ? (
<LogoutButton onClick={this.handleLogoutClick} />
) : (
<LoginButton onClick={this.handleLoginClick} />
<LoginButton onClick={this.handleLoginClick} />
)}
</div>
);
}
```

Just like in JavaScript, it is up to you to choose an appropriate style based on what you and your team consider more readable. Also remember that whenever conditions become too complex, it might be a good time to [extract a component](/docs/components-and-props.html#extracting-components).
Al igual que en JavaScript, depende de ti elegir un estilo apropiado en base a lo que tu y tu equipo consideran más legible. Recuerda también que cuando las condiciones se vuelven demasiado complejas, puede ser un buen momento para [extraer un componente](/docs/components-and-props.html#extracting-components).

### Preventing Component from Rendering
### Evitar que el componente se renderice

In rare cases you might want a component to hide itself even though it was rendered by another component. To do this return `null` instead of its render output.
En casos excepcionales, es posible que desees que un componente se oculte a sí mismo aunque haya sido renderizado por otro componente. Para hacer esto, devuelve `null` en lugar del resultado de renderizado.

In the example below, the `<WarningBanner />` is rendered depending on the value of the prop called `warn`. If the value of the prop is `false`, then the component does not render:
En el siguiente ejemplo, el `<WarningBanner />` se renderiza dependiendo del valor de la prop llamada `warn`. Si el valor de la prop es `false`, entonces el componente no se renderiza:

```javascript{2-4,29}
function WarningBanner(props) {
if (!props.warn) {
return null;
}

return (
<div className="warning">
Warning!
Expand All @@ -213,13 +207,11 @@ class Page extends React.Component {
this.state = {showWarning: true};
this.handleToggleClick = this.handleToggleClick.bind(this);
}

handleToggleClick() {
this.setState(state => ({
showWarning: !state.showWarning
}));
}

render() {
return (
<div>
Expand All @@ -238,6 +230,8 @@ ReactDOM.render(
);
```

[**Try it on CodePen**](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010)
[**Pruébalo en CodePen**](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010)

El devolver `null` desde el método `render` de un componente no influye en la activación de los métodos del ciclo de vida del componente. Por ejemplo `componentDidUpdate` seguirá siendo llamado.


Returning `null` from a component's `render` method does not affect the firing of the component's lifecycle methods. For instance `componentDidUpdate` will still be called.