From fc80aa3382e65a6f9d8d1fd8199b6d1ea5d94a96 Mon Sep 17 00:00:00 2001
From: Rodrigote <rodrigojali@gmail.com>
Date: Thu, 31 Jan 2019 21:15:04 -0300
Subject: [PATCH 01/10] Rodrigo Ali - First translation work, changes to create
 the contribution PR.

---
 content/docs/conditional-rendering.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md
index 5d5c829f3..3374ab227 100644
--- a/content/docs/conditional-rendering.md
+++ b/content/docs/conditional-rendering.md
@@ -1,6 +1,6 @@
 ---
 id: conditional-rendering
-title: Conditional Rendering
+title: Renderizado condicional
 permalink: docs/conditional-rendering.html
 prev: handling-events.html
 next: lists-and-keys.html
@@ -8,9 +8,9 @@ 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/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) para crear elementos representando el estado actual, y deja que React actualice la UI para emparejarlos.
 
 Consider these two components:
 

From 9647728b3aa99d2e336833808c3998b7e700b358 Mon Sep 17 00:00:00 2001
From: Rodrigo Ali <rodrigo.ali@wnco.com>
Date: Fri, 1 Feb 2019 18:11:16 -0300
Subject: [PATCH 02/10] Rodrigo Ali - Advances in general translation.

---
 content/docs/conditional-rendering.md | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md
index 3374ab227..3bff1a2d7 100644
--- a/content/docs/conditional-rendering.md
+++ b/content/docs/conditional-rendering.md
@@ -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) {
@@ -42,15 +42,15 @@ ReactDOM.render(
 );
 ```
 
-[**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 Logout y Login:
 
 ```js
 function LoginButton(props) {
@@ -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 {
@@ -116,11 +116,11 @@ 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 sintáxis más corta. Hay algunas formas de hacer condiciones inline en JSX, explicadas a continuación.
 
-### Inline If with Logical && Operator
+### If inline 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:
 

From 1ea8762275b388576ecb7520549f5bda31bea6ca Mon Sep 17 00:00:00 2001
From: Rodrigote <rodrigojali@gmail.com>
Date: Fri, 1 Feb 2019 23:02:30 -0300
Subject: [PATCH 03/10] Rodrigo Ali - Keep on translating. Minor corrections,
 flagged INLINE word translation.

---
 content/docs/conditional-rendering.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md
index 3bff1a2d7..28fe6f427 100644
--- a/content/docs/conditional-rendering.md
+++ b/content/docs/conditional-rendering.md
@@ -118,11 +118,11 @@ ReactDOM.render(
 
 [**Pruébalo en CodePen**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010)
 
-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 sintáxis más corta. Hay algunas formas de hacer condiciones inline en JSX, explicadas a continuación.
+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 sintáxis más corta. Hay algunas formas de hacer condiciones $INLINE en JSX, explicadas a continuación.
 
-### If inline con operador lógico &&
+### If $INLINE 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éndolas en llaves. Esto incluye al operador lógico `&&` de JavaScript. Puede ser ùtil para incluir condicionalmente un elemento:
 
 ```js{6-10}
 function Mailbox(props) {
@@ -146,15 +146,15 @@ 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)
 
-It works because in JavaScript, `true && expression` always evaluates to `expression`, and `false && expression` always evaluates to `false`.
+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 just después de `&&` aparecerá en el resultado. Si es `false`, React lo ignorará.
 
-### Inline If-Else with Conditional Operator
+### $INLINE If-Else with Conditional Operator
 
-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).
+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).
 
 In the example below, we use it to conditionally render a small block of text.
 

From 373ffd068d4e57a05be90b75e4ae0255bfa909fc Mon Sep 17 00:00:00 2001
From: Rodrigote <rodrigojali@gmail.com>
Date: Sun, 3 Feb 2019 16:22:43 -0300
Subject: [PATCH 04/10] Rodrigo Ali - General translation achieved. TODO: code
 snippet translations and proof reading.

---
 content/docs/conditional-rendering.md | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md
index 28fe6f427..92eeb1cc3 100644
--- a/content/docs/conditional-rendering.md
+++ b/content/docs/conditional-rendering.md
@@ -12,7 +12,7 @@ En React, puedes crear distintos componentes que encapsulan el comportamiento qu
 
 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/en/docs/Web/JavaScript/Reference/Operators/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) {
@@ -152,11 +152,11 @@ Funciona porque en JavaScript, `true && expresión` siempre evalúa a `expresió
 
 Por eso, si la condición es `true`, el elemento just después de `&&` aparecerá en el resultado. Si es `false`, React lo ignorará.
 
-### $INLINE If-Else with Conditional Operator
+### $INLINE If-Else 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 $INLINE de elementos es usar el operador condicional [`condición ? true : false`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/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 bloque de texto pequeño.
 
 ```javascript{5}
 render() {
@@ -169,7 +169,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() {
@@ -186,13 +186,13 @@ render() {
 }
 ```
 
-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 a ti y a 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 render.
 
-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) {
@@ -238,6 +238,6 @@ 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)
 
-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.
+Devolviendo `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.

From 7165c0659b303aad98fe7c0aae1e3eed38eda72f Mon Sep 17 00:00:00 2001
From: Rodrigote <rodrigojali@gmail.com>
Date: Sun, 3 Feb 2019 16:41:16 -0300
Subject: [PATCH 05/10] Rodrigo Ali - Code snippets translation and proof
 reading done. Ready for Code Review.

---
 content/docs/conditional-rendering.md | 272 +++++++++++++-------------
 1 file changed, 137 insertions(+), 135 deletions(-)

diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md
index 92eeb1cc3..4d1aefae5 100644
--- a/content/docs/conditional-rendering.md
+++ b/content/docs/conditional-rendering.md
@@ -5,7 +5,7 @@ permalink: docs/conditional-rendering.html
 prev: handling-events.html
 next: lists-and-keys.html
 redirect_from:
-  - "tips/false-in-jsx.html"
+ - "tips/false-in-jsx.html"
 ---
 
 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.
@@ -15,134 +15,134 @@ El renderizado condicional en React funciona de la misma forma que lo hacen las
 Considera estos dos componentes::
 
 ```js
-function UserGreeting(props) {
-  return <h1>Welcome back!</h1>;
+function SaludoParaUsuario(props) {
+ return <h1>¡Bienvenido de vuelta!</h1>;
 }
 
-function GuestGreeting(props) {
-  return <h1>Please sign up.</h1>;
+function SaludoParaInvitado(props) {
+ return <h1>Por favor regístrese.</h1>;
 }
 ```
 
-Vamos a crear un componente `Greeting` que muestra cualquiera de estos componentes dependiendo si el usuario ha iniciado sesión:
+Vamos a crear un componente `Saludo` que muestra cualquiera de estos componentes dependiendo si el usuario ha iniciado sesión:
 
 ```javascript{3-7,11,12}
-function Greeting(props) {
-  const isLoggedIn = props.isLoggedIn;
-  if (isLoggedIn) {
-    return <UserGreeting />;
-  }
-  return <GuestGreeting />;
+function Saludo(props) {
+ const estaConectado = props.estaConectado;
+ if (estaConectado) {
+   return <SaludoParaUsuario />;
+ }
+ return <SaludoParaInvitado />;
 }
 
 ReactDOM.render(
-  // Try changing to isLoggedIn={true}:
-  <Greeting isLoggedIn={false} />,
-  document.getElementById('root')
+ // Intentar cambiando estaConectado={true}:
+ <Saludo estaConectado={false} />,
+ document.getElementById('raiz')
 );
 ```
 
 [**Pruébalo en CodePen**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011)
 
-Este ejemplo renderiza un saludo diferente según el valor de la prop `isLoggedIn`.
+Este ejemplo renderiza un saludo diferente según el valor de la prop `estaConectado`.
 
 ### Variables de elementos
 
 Puedes usar variables para almacenar elementos. Esto puede ayudarte para renderizar condicionalmente una parte del componente mientras el resto del resultado no cambia.
 
-Considera estos dos componentes nuevos que representan botones de Logout y Login:
+Considera estos dos componentes nuevos que representan botones de Cerrar sesión y Iniciar sesión:
 
 ```js
-function LoginButton(props) {
-  return (
-    <button onClick={props.onClick}>
-      Login
-    </button>
-  );
+function BotonInicioSesion(props) {
+ return (
+   <button onClick={props.onClick}>
+     Iniciar sesión
+   </button>
+ );
 }
 
-function LogoutButton(props) {
-  return (
-    <button onClick={props.onClick}>
-      Logout
-    </button>
-  );
+function BotonCierreSesion(props) {
+ return (
+   <button onClick={props.onClick}>
+     Cerrar sesión
+   </button>
+ );
 }
 ```
 
-En el siguiente ejemplo, crearemos un [componente con estado](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) llamado `LoginControl`.
+En el siguiente ejemplo, crearemos un [componente con estado](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) llamado `GestionInicioSesion`.
 
-El componente va a renderizar `<LoginButton />` o `<LogoutButton />` dependiendo de su estado actual. También va a renderizar un `<Greeting />` del ejemplo anterior:
+El componente va a renderizar `<BotonInicioSesion />` o `<BotonCierreSesion />` dependiendo de su estado actual. También va a renderizar un `<Saludo />` del ejemplo anterior:
 
 ```javascript{20-25,29,30}
-class LoginControl extends React.Component {
-  constructor(props) {
-    super(props);
-    this.handleLoginClick = this.handleLoginClick.bind(this);
-    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} />
-        {button}
-      </div>
-    );
-  }
+class GestionInicioSesion extends React.Component {
+ constructor(props) {
+   super(props);
+   this.manejarClickInicioSesion = this.manejarClickInicioSesion.bind(this);
+   this.manejarClickCierreSesion = this.manejarClickCierreSesion.bind(this);
+   this.state = {estaConectado: false};
+ }
+
+ manejarClickInicioSesion() {
+   this.setState({estaConectado: true});
+ }
+
+ manejarClickCierreSesion() {
+   this.setState({estaConectado: false});
+ }
+
+ render() {
+   const estaConectado = this.state.estaConectado;
+   let boton;
+
+   if (estaConectado) {
+     boton = <BotonCierreSesion onClick={this.manejarClickCierreSesion} />;
+   } else {
+     boton = <BotonInicioSesion onClick={this.manejarClickInicioSesion} />;
+   }
+
+   return (
+     <div>
+       <Saludo estaConectado={estaConectado} />
+       {boton}
+     </div>
+   );
+ }
 }
 
 ReactDOM.render(
-  <LoginControl />,
-  document.getElementById('root')
+ <GestionInicioSesion />,
+ document.getElementById('raiz')
 );
 ```
 
 [**Pruébalo en CodePen**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010)
 
-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 sintáxis más corta. Hay algunas formas de hacer condiciones $INLINE en JSX, explicadas a continuación.
+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 $INLINE en JSX, explicadas a continuación.
 
 ### If $INLINE con operador lógico &&
 
-Puedes [embeber cualquier expresión en JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) envolviéndolas en llaves. Esto incluye al operador lógico `&&` de JavaScript. Puede ser ùtil para incluir condicionalmente un elemento:
+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) {
-  const unreadMessages = props.unreadMessages;
-  return (
-    <div>
-      <h1>Hello!</h1>
-      {unreadMessages.length > 0 &&
-        <h2>
-          You have {unreadMessages.length} unread messages.
-        </h2>
-      }
-    </div>
-  );
+function Buzon(props) {
+ const mensajesNoLeidos = props.mensajesNoLeidos;
+ return (
+   <div>
+     <h1>¡Hola!</h1>
+     {mensajesNoLeidos.length > 0 &&
+       <h2>
+         Tienes {mensajesNoLeidos.length} mensajes sin leer.
+       </h2>
+     }
+   </div>
+ );
 }
 
-const messages = ['React', 'Re: React', 'Re:Re: React'];
+const mensajes = ['React', 'Re: React', 'Re:Re: React'];
 ReactDOM.render(
-  <Mailbox unreadMessages={messages} />,
-  document.getElementById('root')
+ <Buzon mensajesNoLeidos={mensajes} />,
+ document.getElementById('raiz')
 );
 ```
 
@@ -160,12 +160,12 @@ En el siguiente ejemplo, lo usaremos para renderizar de forma condicional un blo
 
 ```javascript{5}
 render() {
-  const isLoggedIn = this.state.isLoggedIn;
-  return (
-    <div>
-      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
-    </div>
-  );
+ const estaConectado = this.state.estaConectado;
+ return (
+   <div>
+     El usuario <b>{estaConectado ? 'está' : 'no está'}</b> conectado.
+   </div>
+ );
 }
 ```
 
@@ -173,16 +173,16 @@ También puede usarse para expresiones más grandes, aunque es menos obvio lo qu
 
 ```js{5,7,9}
 render() {
-  const isLoggedIn = this.state.isLoggedIn;
-  return (
-    <div>
-      {isLoggedIn ? (
-        <LogoutButton onClick={this.handleLogoutClick} />
-      ) : (
-        <LoginButton onClick={this.handleLoginClick} />
-      )}
-    </div>
-  );
+ const estaConectado = this.state.estaConectado;
+ return (
+   <div>
+     {estaConectado ? (
+       <BotonCierreSesion onClick={this.manejarClickCierreSesion} />
+     ) : (
+       <BotonInicioSesion onClick={this.manejarClickInicioSesion} />
+     )}
+   </div>
+ );
 }
 ```
 
@@ -192,52 +192,54 @@ Al igual que en JavaScript, depende de ti elegir un estilo apropiado en base a l
 
 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 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:
+En el siguiente ejemplo, el `<BannerAdvertencia />` se renderiza dependiendo del valor de la prop llamada `advertencia`. 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!
-    </div>
-  );
+function BannerAdvertencia(props) {
+ if (!props.advertencia) {
+   return null;
+ }
+
+ return (
+   <div className="advertencia">
+     ¡Advertencia!
+   </div>
+ );
 }
 
-class Page extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {showWarning: true};
-    this.handleToggleClick = this.handleToggleClick.bind(this);
-  }
-
-  handleToggleClick() {
-    this.setState(state => ({
-      showWarning: !state.showWarning
-    }));
-  }
-
-  render() {
-    return (
-      <div>
-        <WarningBanner warn={this.state.showWarning} />
-        <button onClick={this.handleToggleClick}>
-          {this.state.showWarning ? 'Hide' : 'Show'}
-        </button>
-      </div>
-    );
-  }
+class Pagina extends React.Component {
+ constructor(props) {
+   super(props);
+   this.state = {advertencia: true};
+   this.manejarClickConmutacion = this.manejarClickConmutacion.bind(this);
+ }
+
+ manejarClickConmutacion() {
+   this.setState(state => ({
+     Advertencia: !state.advertencia
+   }));
+ }
+
+ render() {
+   return (
+     <div>
+       <BannerAdvertencia advertencia={this.state.advertencia} />
+       <button onClick={this.manejarClickConmutacion}>
+         {this.state.advertencia ? 'Ocultar' : 'Mostrar'}
+       </button>
+     </div>
+   );
+ }
 }
 
 ReactDOM.render(
-  <Page />,
-  document.getElementById('root')
+ <Pagina />,
+ document.getElementById('raiz')
 );
 ```
 
 [**Pruébalo en CodePen**](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010)
 
 Devolviendo `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.
+
+

From 8b1a42ebd46e862f8e46aefca8f59e73125ae867 Mon Sep 17 00:00:00 2001
From: Rodrigote <rodrigojali@gmail.com>
Date: Sun, 3 Feb 2019 16:54:14 -0300
Subject: [PATCH 06/10] Rodrigo Ali - Fixed indentation issues.

---
 content/docs/conditional-rendering.md | 230 +++++++++++++-------------
 1 file changed, 115 insertions(+), 115 deletions(-)

diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md
index 4d1aefae5..aa4bc03c7 100644
--- a/content/docs/conditional-rendering.md
+++ b/content/docs/conditional-rendering.md
@@ -5,7 +5,7 @@ permalink: docs/conditional-rendering.html
 prev: handling-events.html
 next: lists-and-keys.html
 redirect_from:
- - "tips/false-in-jsx.html"
+  - "tips/false-in-jsx.html"
 ---
 
 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.
@@ -16,11 +16,11 @@ Considera estos dos componentes::
 
 ```js
 function SaludoParaUsuario(props) {
- return <h1>¡Bienvenido de vuelta!</h1>;
+  return <h1>¡Bienvenido de vuelta!</h1>;
 }
 
 function SaludoParaInvitado(props) {
- return <h1>Por favor regístrese.</h1>;
+  return <h1>Por favor regístrese.</h1>;
 }
 ```
 
@@ -28,17 +28,17 @@ Vamos a crear un componente `Saludo` que muestra cualquiera de estos componentes
 
 ```javascript{3-7,11,12}
 function Saludo(props) {
- const estaConectado = props.estaConectado;
- if (estaConectado) {
-   return <SaludoParaUsuario />;
- }
- return <SaludoParaInvitado />;
+  const estaConectado = props.estaConectado;
+  if (estaConectado) {
+    return <SaludoParaUsuario />;
+  }
+  return <SaludoParaInvitado />;
 }
 
 ReactDOM.render(
- // Intentar cambiando estaConectado={true}:
- <Saludo estaConectado={false} />,
- document.getElementById('raiz')
+  // Intentar cambiando estaConectado={true}:
+  <Saludo estaConectado={false} />,
+  document.getElementById('raiz')
 );
 ```
 
@@ -54,19 +54,19 @@ Considera estos dos componentes nuevos que representan botones de Cerrar sesión
 
 ```js
 function BotonInicioSesion(props) {
- return (
-   <button onClick={props.onClick}>
-     Iniciar sesión
-   </button>
- );
+  return (
+    <button onClick={props.onClick}>
+      Iniciar sesión
+    </button>
+  );
 }
 
 function BotonCierreSesion(props) {
- return (
-   <button onClick={props.onClick}>
-     Cerrar sesión
-   </button>
- );
+  return (
+    <button onClick={props.onClick}>
+      Cerrar sesión
+    </button>
+  );
 }
 ```
 
@@ -76,43 +76,43 @@ El componente va a renderizar `<BotonInicioSesion />` o `<BotonCierreSesion />`
 
 ```javascript{20-25,29,30}
 class GestionInicioSesion extends React.Component {
- constructor(props) {
-   super(props);
-   this.manejarClickInicioSesion = this.manejarClickInicioSesion.bind(this);
-   this.manejarClickCierreSesion = this.manejarClickCierreSesion.bind(this);
-   this.state = {estaConectado: false};
- }
-
- manejarClickInicioSesion() {
-   this.setState({estaConectado: true});
- }
-
- manejarClickCierreSesion() {
-   this.setState({estaConectado: false});
- }
-
- render() {
-   const estaConectado = this.state.estaConectado;
-   let boton;
-
-   if (estaConectado) {
-     boton = <BotonCierreSesion onClick={this.manejarClickCierreSesion} />;
-   } else {
-     boton = <BotonInicioSesion onClick={this.manejarClickInicioSesion} />;
-   }
-
-   return (
-     <div>
-       <Saludo estaConectado={estaConectado} />
-       {boton}
-     </div>
-   );
- }
+  constructor(props) {
+    super(props);
+    this.manejarClickInicioSesion = this.manejarClickInicioSesion.bind(this);
+    this.manejarClickCierreSesion = this.manejarClickCierreSesion.bind(this);
+    this.state = {estaConectado: false};
+  }
+
+  manejarClickInicioSesion() {
+    this.setState({estaConectado: true});
+  }
+
+  manejarClickCierreSesion() {
+    this.setState({estaConectado: false});
+  }
+
+  render() {
+    const estaConectado = this.state.estaConectado;
+    let boton;
+
+    if (estaConectado) {
+      boton = <BotonCierreSesion onClick={this.manejarClickCierreSesion} />;
+    } else {
+      boton = <BotonInicioSesion onClick={this.manejarClickInicioSesion} />;
+    }
+
+    return (
+      <div>
+        <Saludo estaConectado={estaConectado} />
+        {boton}
+      </div>
+    );
+  }
 }
 
 ReactDOM.render(
- <GestionInicioSesion />,
- document.getElementById('raiz')
+  <GestionInicioSesion />,
+  document.getElementById('raiz')
 );
 ```
 
@@ -126,23 +126,23 @@ Puedes [embeber cualquier expresión en JSX](/docs/introducing-jsx.html#embeddin
 
 ```js{6-10}
 function Buzon(props) {
- const mensajesNoLeidos = props.mensajesNoLeidos;
- return (
-   <div>
-     <h1>¡Hola!</h1>
-     {mensajesNoLeidos.length > 0 &&
-       <h2>
-         Tienes {mensajesNoLeidos.length} mensajes sin leer.
-       </h2>
-     }
-   </div>
- );
+  const mensajesNoLeidos = props.mensajesNoLeidos;
+  return (
+    <div>
+      <h1>¡Hola!</h1>
+      {mensajesNoLeidos.length > 0 &&
+        <h2>
+          Tienes {mensajesNoLeidos.length} mensajes sin leer.
+        </h2>
+      }
+    </div>
+  );
 }
 
 const mensajes = ['React', 'Re: React', 'Re:Re: React'];
 ReactDOM.render(
- <Buzon mensajesNoLeidos={mensajes} />,
- document.getElementById('raiz')
+  <Buzon mensajesNoLeidos={mensajes} />,
+  document.getElementById('raiz')
 );
 ```
 
@@ -160,12 +160,12 @@ En el siguiente ejemplo, lo usaremos para renderizar de forma condicional un blo
 
 ```javascript{5}
 render() {
- const estaConectado = this.state.estaConectado;
- return (
-   <div>
-     El usuario <b>{estaConectado ? 'está' : 'no está'}</b> conectado.
-   </div>
- );
+  const estaConectado = this.state.estaConectado;
+  return (
+    <div>
+      El usuario <b>{estaConectado ? 'está' : 'no está'}</b> conectado.
+    </div>
+  );
 }
 ```
 
@@ -173,16 +173,16 @@ También puede usarse para expresiones más grandes, aunque es menos obvio lo qu
 
 ```js{5,7,9}
 render() {
- const estaConectado = this.state.estaConectado;
- return (
-   <div>
-     {estaConectado ? (
-       <BotonCierreSesion onClick={this.manejarClickCierreSesion} />
-     ) : (
-       <BotonInicioSesion onClick={this.manejarClickInicioSesion} />
-     )}
-   </div>
- );
+  const estaConectado = this.state.estaConectado;
+  return (
+    <div>
+      {estaConectado ? (
+        <BotonCierreSesion onClick={this.manejarClickCierreSesion} />
+      ) : (
+        <BotonInicioSesion onClick={this.manejarClickInicioSesion} />
+      )}
+    </div>
+  );
 }
 ```
 
@@ -196,45 +196,45 @@ En el siguiente ejemplo, el `<BannerAdvertencia />` se renderiza dependiendo del
 
 ```javascript{2-4,29}
 function BannerAdvertencia(props) {
- if (!props.advertencia) {
-   return null;
- }
+  if (!props.advertencia) {
+    return null;
+  }
 
- return (
-   <div className="advertencia">
+  return (
+    <div className="advertencia">
      ¡Advertencia!
-   </div>
- );
+    </div>
+  );
 }
 
 class Pagina extends React.Component {
- constructor(props) {
-   super(props);
-   this.state = {advertencia: true};
-   this.manejarClickConmutacion = this.manejarClickConmutacion.bind(this);
- }
-
- manejarClickConmutacion() {
-   this.setState(state => ({
-     Advertencia: !state.advertencia
-   }));
- }
-
- render() {
-   return (
-     <div>
-       <BannerAdvertencia advertencia={this.state.advertencia} />
-       <button onClick={this.manejarClickConmutacion}>
-         {this.state.advertencia ? 'Ocultar' : 'Mostrar'}
-       </button>
-     </div>
-   );
- }
+  constructor(props) {
+    super(props);
+    this.state = {advertencia: true};
+    this.manejarClickConmutacion = this.manejarClickConmutacion.bind(this);
+  }
+
+  manejarClickConmutacion() {
+    this.setState(state => ({
+      Advertencia: !state.advertencia
+    }));
+  }
+
+  render() {
+    return (
+      <div>
+        <BannerAdvertencia advertencia={this.state.advertencia} />
+        <button onClick={this.manejarClickConmutacion}>
+          {this.state.advertencia ? 'Ocultar' : 'Mostrar'}
+        </button>
+      </div>
+    );
+  }
 }
 
 ReactDOM.render(
- <Pagina />,
- document.getElementById('raiz')
+  <Pagina />,
+  document.getElementById('raiz')
 );
 ```
 

From 4d3d6bf2621020589c6ffcff239b295cdeff0f70 Mon Sep 17 00:00:00 2001
From: Rodrigote <rodrigojali@gmail.com>
Date: Sun, 3 Feb 2019 21:04:44 -0300
Subject: [PATCH 07/10] Rodrigo Ali - Addressing CR comments, reverted some
 changes, changed $INLINE flagged word

---
 content/docs/conditional-rendering.md | 107 ++++++++++++--------------
 1 file changed, 51 insertions(+), 56 deletions(-)

diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md
index aa4bc03c7..34096b821 100644
--- a/content/docs/conditional-rendering.md
+++ b/content/docs/conditional-rendering.md
@@ -10,117 +10,112 @@ redirect_from:
 
 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.
 
-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/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) para crear elementos representando el estado actual, y deja que React actualice la UI para emparejarlos.
+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/Sentencias/if...else) para crear elementos representando el estado actual, y deja que React actualice la UI para emparejarlos.
 
 Considera estos dos componentes::
 
 ```js
-function SaludoParaUsuario(props) {
-  return <h1>¡Bienvenido de vuelta!</h1>;
+function UserGreeting(props) {
+  return <h1>Welcome back!</h1>;
 }
 
-function SaludoParaInvitado(props) {
-  return <h1>Por favor regístrese.</h1>;
+function GuestGreeting(props) {
+  return <h1>Please sign up.</h1>;
 }
 ```
 
-Vamos a crear un componente `Saludo` que muestra cualquiera de estos componentes dependiendo si el usuario ha iniciado sesión:
+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 Saludo(props) {
-  const estaConectado = props.estaConectado;
-  if (estaConectado) {
-    return <SaludoParaUsuario />;
+function Greeting(props) {
+  const isLoggedIn = props.isLoggedIn;
+  if (isLoggedIn) {
+    return <UserGreeting />;
   }
-  return <SaludoParaInvitado />;
+  return <GuestGreeting />;
 }
 
 ReactDOM.render(
-  // Intentar cambiando estaConectado={true}:
-  <Saludo estaConectado={false} />,
-  document.getElementById('raiz')
+  // Intentar cambiando isLoggedIn={true}:
+  <Greeting isLoggedIn={false} />,
+  document.getElementById('root')
 );
 ```
 
 [**Pruébalo en CodePen**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011)
 
-Este ejemplo renderiza un saludo diferente según el valor de la prop `estaConectado`.
+Este ejemplo renderiza un saludo diferente según el valor de la prop `isLoggedIn`.
 
 ### Variables de elementos
 
 Puedes usar variables para almacenar elementos. Esto puede ayudarte para renderizar condicionalmente una parte del componente mientras el resto del resultado no cambia.
 
-Considera estos dos componentes nuevos que representan botones de Cerrar sesión y Iniciar sesión:
+Considera estos dos componentes nuevos que representan botones de Logout y Login:
 
 ```js
-function BotonInicioSesion(props) {
+function LoginButton(props) {
   return (
     <button onClick={props.onClick}>
-      Iniciar sesión
+      Login
     </button>
   );
 }
 
-function BotonCierreSesion(props) {
+function LogoutButton(props) {
   return (
     <button onClick={props.onClick}>
-      Cerrar sesión
+      Logout
     </button>
   );
 }
 ```
 
-En el siguiente ejemplo, crearemos un [componente con estado](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) llamado `GestionInicioSesion`.
+En el siguiente ejemplo, crearemos un [componente con estado](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) llamado `LoginControl`.
 
-El componente va a renderizar `<BotonInicioSesion />` o `<BotonCierreSesion />` dependiendo de su estado actual. También va a renderizar un `<Saludo />` del ejemplo anterior:
+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 GestionInicioSesion extends React.Component {
+class LoginControl extends React.Component {
   constructor(props) {
     super(props);
-    this.manejarClickInicioSesion = this.manejarClickInicioSesion.bind(this);
-    this.manejarClickCierreSesion = this.manejarClickCierreSesion.bind(this);
-    this.state = {estaConectado: false};
+    this.handleLoginClick = this.handleLoginClick.bind(this);
+    this.handleLogoutClick = this.handleLogoutClick.bind(this);
+    this.state = {isLoggedIn: false};
   }
-
-  manejarClickInicioSesion() {
-    this.setState({estaConectado: true});
+  handleLoginClick() {
+    this.setState({isLoggedIn: true});
   }
-
-  manejarClickCierreSesion() {
-    this.setState({estaConectado: false});
+  handleLogoutClick() {
+    this.setState({isLoggedIn: false});
   }
-
   render() {
-    const estaConectado = this.state.estaConectado;
-    let boton;
-
-    if (estaConectado) {
-      boton = <BotonCierreSesion onClick={this.manejarClickCierreSesion} />;
+    const isLoggedIn = this.state.isLoggedIn;
+    let button;
+    if (isLoggedIn) {
+      button = <LogoutButton onClick={this.handleLogoutClick} />;
     } else {
-      boton = <BotonInicioSesion onClick={this.manejarClickInicioSesion} />;
+      button = <LoginButton onClick={this.handleLoginClick} />;
     }
-
     return (
       <div>
-        <Saludo estaConectado={estaConectado} />
-        {boton}
+        <Greeting isLoggedIn={isLoggedIn} />
+        {button}
       </div>
     );
   }
 }
 
 ReactDOM.render(
-  <GestionInicioSesion />,
-  document.getElementById('raiz')
+  <LoginControl />,
+  document.getElementById('root')
 );
 ```
 
 [**Pruébalo en CodePen**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010)
 
-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 $INLINE en JSX, explicadas a continuación.
+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 la misma línea en JSX, explicadas a continuación.
 
-### If $INLINE con operador lógico &&
+### If en la misma línea con operador lógico &&
 
 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:
 
@@ -142,7 +137,7 @@ function Buzon(props) {
 const mensajes = ['React', 'Re: React', 'Re:Re: React'];
 ReactDOM.render(
   <Buzon mensajesNoLeidos={mensajes} />,
-  document.getElementById('raiz')
+  document.getElementById('root')
 );
 ```
 
@@ -152,18 +147,18 @@ Funciona porque en JavaScript, `true && expresión` siempre evalúa a `expresió
 
 Por eso, si la condición es `true`, el elemento just después de `&&` aparecerá en el resultado. Si es `false`, React lo ignorará.
 
-### $INLINE If-Else con operador condicional
+### en la misma línea If-Else con operador condicional
 
-Otro método para el renderizado condicional $INLINE de elementos es usar el operador condicional [`condición ? true : false`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) de JavaScript.
+Otro método para el renderizado condicional en la misma línea de elementos es usar el operador condicional [`condición ? true : false`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) de JavaScript.
 
 En el siguiente ejemplo, lo usaremos para renderizar de forma condicional un bloque de texto pequeño.
 
 ```javascript{5}
 render() {
-  const estaConectado = this.state.estaConectado;
+  const isLoggedIn = this.state.isLoggedIn;
   return (
     <div>
-      El usuario <b>{estaConectado ? 'está' : 'no está'}</b> conectado.
+      El usuario <b>{isLoggedIn ? 'está' : 'no está'}</b> conectado.
     </div>
   );
 }
@@ -173,13 +168,13 @@ También puede usarse para expresiones más grandes, aunque es menos obvio lo qu
 
 ```js{5,7,9}
 render() {
-  const estaConectado = this.state.estaConectado;
+  const isLoggedIn = this.state.isLoggedIn;
   return (
     <div>
-      {estaConectado ? (
-        <BotonCierreSesion onClick={this.manejarClickCierreSesion} />
+      {isLoggedIn ? (
+        <LogoutButton onClick={this.manejarClickCierreSesion} />
       ) : (
-        <BotonInicioSesion onClick={this.manejarClickInicioSesion} />
+        <LoginButton  onClick={this.manejarClickInicioSesion} />
       )}
     </div>
   );
@@ -234,7 +229,7 @@ class Pagina extends React.Component {
 
 ReactDOM.render(
   <Pagina />,
-  document.getElementById('raiz')
+  document.getElementById('root')
 );
 ```
 

From 0b0253b9f98d6970305fa87306a17903ae0db94d Mon Sep 17 00:00:00 2001
From: Rodrigote <rodrigojali@gmail.com>
Date: Sun, 3 Feb 2019 21:50:17 -0300
Subject: [PATCH 08/10] Rodrigo Ali - Minor snippet revertions, fixed links to
 point spanish MDN documentation.

---
 content/docs/conditional-rendering.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md
index 34096b821..db3b77849 100644
--- a/content/docs/conditional-rendering.md
+++ b/content/docs/conditional-rendering.md
@@ -10,7 +10,7 @@ redirect_from:
 
 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.
 
-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/Sentencias/if...else) para crear elementos representando el estado actual, y deja que React actualice la UI para emparejarlos.
+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.
 
 Considera estos dos componentes::
 
@@ -120,14 +120,14 @@ Si bien declarar una variable y usar una sentencia `if` es una buena forma de re
 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 Buzon(props) {
-  const mensajesNoLeidos = props.mensajesNoLeidos;
+function Mailbox(props) {
+  const unreadMessages = props.unreadMessages;
   return (
     <div>
-      <h1>¡Hola!</h1>
-      {mensajesNoLeidos.length > 0 &&
+      <h1>Hello!</h1>
+      {unreadMessages.length > 0 &&
         <h2>
-          Tienes {mensajesNoLeidos.length} mensajes sin leer.
+          You have {unreadMessages.length} unread messages.
         </h2>
       }
     </div>
@@ -136,7 +136,7 @@ function Buzon(props) {
 
 const mensajes = ['React', 'Re: React', 'Re:Re: React'];
 ReactDOM.render(
-  <Buzon mensajesNoLeidos={mensajes} />,
+  <Mailbox unreadMessages={messages} />,
   document.getElementById('root')
 );
 ```
@@ -149,7 +149,7 @@ Por eso, si la condición es `true`, el elemento just después de `&&` aparecer
 
 ### en la misma línea If-Else con operador condicional
 
-Otro método para el renderizado condicional en la misma línea de elementos es usar el operador condicional [`condición ? true : false`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) de JavaScript.
+Otro método para el renderizado condicional en la misma línea de elementos es usar el operador condicional [`condición ? true : false`](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/Conditional_Operator) de JavaScript.
 
 En el siguiente ejemplo, lo usaremos para renderizar de forma condicional un bloque de texto pequeño.
 

From 7649fc346e4321f138b81e1692d9ffcb1801c3b8 Mon Sep 17 00:00:00 2001
From: Rodrigote <rodrigojali@gmail.com>
Date: Sun, 3 Feb 2019 22:03:03 -0300
Subject: [PATCH 09/10] Rodrigo Ali: final revision, all snipets reverted.
 Spanish grammar fixed. All accent marks reviewed.

---
 content/docs/conditional-rendering.md | 53 +++++++++++++--------------
 1 file changed, 25 insertions(+), 28 deletions(-)

diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md
index db3b77849..ca13b93b8 100644
--- a/content/docs/conditional-rendering.md
+++ b/content/docs/conditional-rendering.md
@@ -50,7 +50,7 @@ Este ejemplo renderiza un saludo diferente según el valor de la prop `isLoggedI
 
 Puedes usar variables para almacenar elementos. Esto puede ayudarte para renderizar condicionalmente una parte del componente mientras el resto del resultado no cambia.
 
-Considera estos dos componentes nuevos que representan botones de Logout y Login:
+Considera estos dos componentes nuevos que representan botones de cierre e inicio de sesión:
 
 ```js
 function LoginButton(props) {
@@ -113,11 +113,11 @@ ReactDOM.render(
 
 [**Pruébalo en CodePen**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010)
 
-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 la misma línea en JSX, explicadas a continuación.
+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 misma línea en JSX, explicadas a continuación.
 
 ### If en la misma línea con operador lógico &&
 
-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:
+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) {
@@ -143,22 +143,22 @@ ReactDOM.render(
 
 [**Pruébalo en CodePen**](https://codepen.io/gaearon/pen/ozJddz?editors=0010)
 
-Funciona porque en JavaScript, `true && expresión` siempre evalúa a `expresión`, y `false && expresión` siempre evalúa a `false`.
+Esto funciona porque en JavaScript, `true && expresión` siempre evalúa a `expresión`, y `false && expresión` siempre evalúa a `false`.
 
-Por eso, si la condición es `true`, el elemento just después de `&&` aparecerá en el resultado. Si es `false`, React lo ignorará.
+Por eso, si la condición es `true`, el elemento justo después de `&&` aparecerá en el resultado. Si es `false`, React lo ignorará.
 
-### en la misma línea If-Else con operador condicional
+### If-Else en una línea con operador condicional
 
-Otro método para el renderizado condicional en la misma línea de elementos es usar el operador condicional [`condición ? true : false`](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/Conditional_Operator) de JavaScript.
+Otro método para el renderizado condicional en una misma línea de elementos es usar el operador condicional [`condición ? true : false`](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/Conditional_Operator) de JavaScript.
 
-En el siguiente ejemplo, lo usaremos para renderizar de forma condicional un bloque de texto pequeño.
+En el siguiente ejemplo, lo usaremos para renderizar de forma condicional un pequeño bloque de texto.
 
 ```javascript{5}
 render() {
   const isLoggedIn = this.state.isLoggedIn;
   return (
     <div>
-      El usuario <b>{isLoggedIn ? 'está' : 'no está'}</b> conectado.
+      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
     </div>
   );
 }
@@ -181,46 +181,43 @@ render() {
 }
 ```
 
-Al igual que en JavaScript, depende de ti elegir un estilo apropiado en base a lo que a ti y a 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).
+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).
 
 ### Evitar que el componente se renderice
 
-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 render.
+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.
 
-En el siguiente ejemplo, el `<BannerAdvertencia />` se renderiza dependiendo del valor de la prop llamada `advertencia`. Si el valor de la prop es `false`, entonces el componente no se renderiza:
+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 BannerAdvertencia(props) {
-  if (!props.advertencia) {
+function WarningBanner(props) {
+  if (!props.warn) {
     return null;
   }
-
   return (
-    <div className="advertencia">
-     ¡Advertencia!
+    <div className="warning">
+      Warning!
     </div>
   );
 }
 
-class Pagina extends React.Component {
+class Page extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {advertencia: true};
-    this.manejarClickConmutacion = this.manejarClickConmutacion.bind(this);
+    this.state = {showWarning: true};
+    this.handleToggleClick = this.handleToggleClick.bind(this);
   }
-
-  manejarClickConmutacion() {
+  handleToggleClick() {
     this.setState(state => ({
-      Advertencia: !state.advertencia
+      showWarning: !state.showWarning
     }));
   }
-
   render() {
     return (
       <div>
-        <BannerAdvertencia advertencia={this.state.advertencia} />
-        <button onClick={this.manejarClickConmutacion}>
-          {this.state.advertencia ? 'Ocultar' : 'Mostrar'}
+        <WarningBanner warn={this.state.showWarning} />
+        <button onClick={this.handleToggleClick}>
+          {this.state.showWarning ? 'Hide' : 'Show'}
         </button>
       </div>
     );
@@ -235,6 +232,6 @@ ReactDOM.render(
 
 [**Pruébalo en CodePen**](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010)
 
-Devolviendo `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.
+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.
 
 

From d3e9f9d78a546ad359ae512171de81252ba50a68 Mon Sep 17 00:00:00 2001
From: Rodrigote <rodrigojali@gmail.com>
Date: Mon, 4 Feb 2019 19:20:45 -0300
Subject: [PATCH 10/10] Rodrigo Ali - Addressing PR comments regarding snippets
 words, reviewed spanish grammar again. Minor changes.

---
 content/docs/conditional-rendering.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md
index ca13b93b8..0c9e073e7 100644
--- a/content/docs/conditional-rendering.md
+++ b/content/docs/conditional-rendering.md
@@ -12,7 +12,7 @@ En React, puedes crear distintos componentes que encapsulan el comportamiento qu
 
 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.
 
-Considera estos dos componentes::
+Considera estos dos componentes:
 
 ```js
 function UserGreeting(props) {
@@ -113,9 +113,9 @@ ReactDOM.render(
 
 [**Pruébalo en CodePen**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010)
 
-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 misma línea en JSX, explicadas a continuación.
+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.
 
-### If en la misma línea con operador lógico &&
+### If en una línea con operador lógico &&
 
 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:
 
@@ -134,7 +134,7 @@ function Mailbox(props) {
   );
 }
 
-const mensajes = ['React', 'Re: React', 'Re:Re: React'];
+const messages = ['React', 'Re: React', 'Re:Re: React'];
 ReactDOM.render(
   <Mailbox unreadMessages={messages} />,
   document.getElementById('root')
@@ -149,7 +149,7 @@ Por eso, si la condición es `true`, el elemento justo después de `&&` aparecer
 
 ### If-Else en una línea con operador condicional
 
-Otro método para el renderizado condicional en una misma línea de elementos es usar el operador condicional [`condición ? true : false`](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/Conditional_Operator) de JavaScript.
+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.
 
 En el siguiente ejemplo, lo usaremos para renderizar de forma condicional un pequeño bloque de texto.
 
@@ -172,9 +172,9 @@ render() {
   return (
     <div>
       {isLoggedIn ? (
-        <LogoutButton onClick={this.manejarClickCierreSesion} />
+        <LogoutButton onClick={this.handleLogoutClick} />
       ) : (
-        <LoginButton  onClick={this.manejarClickInicioSesion} />
+        <LoginButton  onClick={this.handleLoginClick} />
       )}
     </div>
   );
@@ -225,7 +225,7 @@ class Page extends React.Component {
 }
 
 ReactDOM.render(
-  <Pagina />,
+  <Page />,
   document.getElementById('root')
 );
 ```