Translation of the page "Conditional rendering" (#110)

* wip: conditional-rendering

* Default codepen link description

* Fixes "undefined" in codepen links

When using a non-empty link title (translated) we get undefined
Changing the default to the translated version and leaving them empty
fixes the issue

* conditional-rendering: done

imported codepen examples into source code
I'll ask if it's the case of doing that upstream as well for better...
"translatability" 😂

* bugfix: missing bits :)

* prettier fixes

* Highlighting offsets 🐛🔫

* Update content/docs/conditional-rendering.md

Co-Authored-By: deblasis <[email protected]>

Author: deblasis

content/docs/components-and-props.md

@@ -76,7 +76,7 @@ ReactDOM.render(
 );
 ```
 
-[**Prova in CodePen**](codepen://components-and-props/rendering-a-component)
+[](codepen://components-and-props/rendering-a-component)
 
 Ricapitoliamo cosa succede nell'esempio:
 
@@ -118,7 +118,7 @@ ReactDOM.render(
 );
 ```
 
-[**Prova in CodePen**](codepen://components-and-props/composing-components)
+[](codepen://components-and-props/composing-components)
 
 Normalmente, le nuove applicazioni React hanno un singolo componente chiamato `App` al livello più alto che racchiude tutti gli altri componenti. Ad ogni modo, quando si va ad integrare React in una applicazione già esistente, è bene partire dal livello più basso e da piccoli componenti come ad esempio `Bottone` procedendo da lì fino alla cima della gerarchia della vista.
 
@@ -152,7 +152,7 @@ function Commento(props) {
 }
 ```
 
-[**Prova in CodePen**](codepen://components-and-props/extracting-components)
+[](codepen://components-and-props/extracting-components)
 
 Esso accetta come props: `autore` (un oggetto), `testo` (una stringa) e `data` (sotto forma di oggetto [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)) al fine di renderizzare un commento in un sito di social media, come Facebook.
 
@@ -231,7 +231,7 @@ function Commento(props) {
 }
 ```
 
-[**Prova in CodePen**](codepen://components-and-props/extracting-components-continued)
+[](codepen://components-and-props/extracting-components-continued)
 
 Estrarre componenti può semprare un'attività pesante ma avere una tavolozza di componenti riutilizzabili ripaga molto bene nelle applicazioni più complesse. Una buona regola da tenere a mente è che se una parte della tua UI viene usata diverse volte (`Bottone`, `Pannello`, `Avatar`) o se è abbastanza complessa di per sé (`App`, `StoriaFeed`, `Commento`), allora questi componenti sono buoni candidati ad essere riutilizzabili.
 

content/docs/conditional-rendering.md

@@ -1,243 +1,240 @@
 ---
 id: conditional-rendering
-title: Conditional Rendering
+title: Renderizzazione Condizionale
 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.
+In React, puoi creare componenti distinti che incapsulano il funzionamento di cui hai bisogno. Quindi, puoi renderizzarne solo alcuni, a seconda dello stato della tua applicazione.
 
-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.
+La renderizzazione condizionale in React funziona nello stesso modo in cui funzionano le condizioni in JavaScript. Puoi perciò usare operatori come [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) o l'[operatore condizionale]([https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Operators/Operator_Condizionale)) per creare elementi che rappresentano lo stato corrente cosicchè React possa aggiornare la UI di conseguenza.
 
-Consider these two components:
+Considera i due componenti:
 
 ```js
-function UserGreeting(props) {
-  return <h1>Welcome back!</h1>;
+function BenvenutoUtente(props) {
+  return <h1>Bentornato/a!</h1>;
 }
 
-function GuestGreeting(props) {
-  return <h1>Please sign up.</h1>;
+function BenvenutoOspite(props) {
+  return <h1>Autenticati, per favore</h1>;
 }
 ```
 
-We'll create a `Greeting` component that displays either of these components depending on whether a user is logged in:
+Creiamo un componente `Benvenuto` che visualizza l'uno o l'altro dei componenti appena visti a seconda del fatto che l'utente sia autenticato o meno:
 
 ```javascript{3-7,11,12}
-function Greeting(props) {
-  const isLoggedIn = props.isLoggedIn;
-  if (isLoggedIn) {
-    return <UserGreeting />;
+function Benvenuto(props) {
+  const utenteAutenticato = props.utenteAutenticato;
+  if (utenteAutenticato) {
+    return <BenvenutoUtente />;
   }
-  return <GuestGreeting />;
+  return <BenvenutoOspite />;
 }
 
 ReactDOM.render(
-  // Try changing to isLoggedIn={true}:
-  <Greeting isLoggedIn={false} />,
+  // Prova a cambiare in utenteAutenticato={true}:
+  <Benvenuto utenteAutenticato={false} />,
   document.getElementById('root')
 );
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011)
+[](codepen://conditional-rendering/1)
 
-This example renders a different greeting depending on the value of `isLoggedIn` prop.
+Questo esempio renderizza un messaggio di benvenuto diverso a seconda del valore della prop `utenteAutenticato`.
 
-### Element Variables {#element-variables}
+### Variabili Elemento {#element-variables}
 
-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.
+Le variabili possono contenere elementi. Ciò ti permette di renderizzare condizionatamente parti del componente mentre il resto dell'output non cambia.
 
-Consider these two new components representing Logout and Login buttons:
+Considera questi due nuovi componenti che rappresentano bottoni di Logout e Login:
 
 ```js
-function LoginButton(props) {
-  return (
-    <button onClick={props.onClick}>
-      Login
-    </button>
-  );
+function BottoneLogin(props) {
+  return <button onClick={props.onClick}>Login</button>;
 }
 
-function LogoutButton(props) {
-  return (
-    <button onClick={props.onClick}>
-      Logout
-    </button>
-  );
+function BottoneLogout(props) {
+  return <button onClick={props.onClick}>Logout</button>;
 }
 ```
 
-In the example below, we will create a [stateful component](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) called `LoginControl`.
+Nell'esempio di seguito, creeremo un [componente stateful](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) chiamato `ControlloLogin`.
 
-It will render either `<LoginButton />` or `<LogoutButton />` depending on its current state. It will also render a `<Greeting />` from the previous example:
+Esso renderizzerà `<BottoneLogin />` o `<BottoneLogout />` a seconda del suo stato corrente. Renderizzerà inoltre il componente `<Benvenuto />` dell'esempio precedente:
 
-```javascript{20-25,29,30}
-class LoginControl extends React.Component {
+```javascript{21-29,33,34}
+class ControlloLogin extends React.Component {
   constructor(props) {
     super(props);
     this.handleLoginClick = this.handleLoginClick.bind(this);
     this.handleLogoutClick = this.handleLogoutClick.bind(this);
-    this.state = {isLoggedIn: false};
+    this.state = {utenteAutenticato: false};
   }
 
   handleLoginClick() {
-    this.setState({isLoggedIn: true});
+    this.setState({utenteAutenticato: true});
   }
 
   handleLogoutClick() {
-    this.setState({isLoggedIn: false});
+    this.setState({utenteAutenticato: false});
   }
 
   render() {
-    const isLoggedIn = this.state.isLoggedIn;
-    let button;
+    const utenteAutenticato = this.state.utenteAutenticato;
+    let bottone;
 
-    if (isLoggedIn) {
-      button = <LogoutButton onClick={this.handleLogoutClick} />;
+    if (utenteAutenticato) {
+      bottone = (
+        <BottoneLogout onClick={this.handleLogoutClick} />
+      );
     } else {
-      button = <LoginButton onClick={this.handleLoginClick} />;
+      bottone = (
+        <BottoneLogin onClick={this.handleLoginClick} />
+      );
     }
 
     return (
       <div>
-        <Greeting isLoggedIn={isLoggedIn} />
-        {button}
+        <Benvenuto utenteAutenticato={utenteAutenticato} />
+        {bottone}
       </div>
     );
   }
 }
 
 ReactDOM.render(
-  <LoginControl />,
+  <ControlloLogin />,
   document.getElementById('root')
 );
+
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010)
+[](codepen://conditional-rendering/2)
 
-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.
+Anche se dichiarare una variabile ed usare una condizione con `if` è un buon modo per renderizzare condizionatamente un componente, a volte è preferibile usare una sintassi più corta. Esistono diversi modi per definire condizioni *inline* (ossia nella stessa riga), diamo uno sguardo.
 
-### Inline If with Logical && Operator {#inline-if-with-logical--operator}
+### Condizione If Inline con Operatore Logico && {#inline-if-with-logical--operator}
 
-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:
+Puoi [incorporare espressioni in JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) racchiudendole in parentesi graffe. Lo stesso vale per l'operatore logico JavaScript `&&` che può tornare utile quando vogliamo includere un elemento condizionatamente:
 
 ```js{6-10}
-function Mailbox(props) {
-  const unreadMessages = props.unreadMessages;
+function CasellaDiPosta(props) {
+  const messaggiNonLetti = props.messaggiNonLetti;
   return (
     <div>
-      <h1>Hello!</h1>
-      {unreadMessages.length > 0 &&
+      <h1>Ciao!</h1>
+      {messaggiNonLetti.length > 0 && (
         <h2>
-          You have {unreadMessages.length} unread messages.
+          Hai {messaggiNonLetti.length} messaggi non letti.
         </h2>
-      }
+      )}
     </div>
   );
 }
 
-const messages = ['React', 'Re: React', 'Re:Re: React'];
+const messaggi = ['React', 'Re: React', 'Re:Re: React'];
 ReactDOM.render(
-  <Mailbox unreadMessages={messages} />,
+  <CasellaDiPosta messaggiNonLetti={messaggi} />,
   document.getElementById('root')
 );
-```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/ozJddz?editors=0010)
+```
+[](codepen://conditional-rendering/3)
 
-It works because in JavaScript, `true && expression` always evaluates to `expression`, and `false && expression` always evaluates to `false`.
+Funziona perché in JavaScript, `true && espressione` si risolve sempre in `espressione`, mentre `false && espressione` si risolve sempre in `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.
+Per questo, se la condizione è `true`, l'elemento dopo `&&` verrà renderizzato. Se invece è `false`, React lo ignorerà.
 
-### Inline If-Else with Conditional Operator {#inline-if-else-with-conditional-operator}
+### Condizioni If-Else Inline con Operatore Condizionale {#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).
+Un altro metodo per renderizzare condizionatamente elementi inline è quello di usare l'operatore condizionale JavaScript [`condizione ? true : false`](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Operators/Operator_Condizionale).
 
-In the example below, we use it to conditionally render a small block of text.
+Nell'esempio di seguito, lo useremo per renderizzare condizionatamente un breve blocco di testo.
 
 ```javascript{5}
 render() {
-  const isLoggedIn = this.state.isLoggedIn;
+  const utenteAutenticato = this.state.utenteAutenticato;
   return (
     <div>
-      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
+      L'utente è <b>{utenteAutenticato ? 'attualmente' : 'non'}</b> autenticato.
     </div>
   );
 }
 ```
 
-It can also be used for larger expressions although it is less obvious what's going on:
+Può essere usato anche per espressioni più lunghe anche se diventa meno ovvio capire cosa sta succedendo:
 
 ```js{5,7,9}
 render() {
-  const isLoggedIn = this.state.isLoggedIn;
+  const utenteAutenticato = this.state.utenteAutenticato;
   return (
     <div>
-      {isLoggedIn ? (
-        <LogoutButton onClick={this.handleLogoutClick} />
+      {utenteAutenticato ? (
+        <BottoneLogout onClick={this.handleLogoutClick} />
       ) : (
-        <LoginButton onClick={this.handleLoginClick} />
+        <BottoneLogin 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).
+Proprio come in JavaScript, sta a te scegliere lo stile più appropriato a seconda di cosa tu ed il tuo team ritenete più leggibile. Inoltre, ricorda che se le condizioni diventano troppo complesse, potrebbe essere un segnale del fatto che probabilmente è bene [estrarre un componente](/docs/components-and-props.html#extracting-components).
 
-### Preventing Component from Rendering {#preventing-component-from-rendering}
+### Prevenire la Renderizzazione di un Componente {#preventing-component-from-rendering}
 
-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.
+In alcuni rari casi potresti volere che un componente sia nascosto anche se viene renderizzato da un altro componente. Per ottenere questo risultato devi ritornare `null` al posto del suo output di renderizzazione.
 
-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:
+Nell'esempio di seguito, il componente `<MessaggioAvviso />` viene renderizzato a seconda del valore della prop chiamata `attenzione`. Se il valore della prop è `false`, il componente non viene renderizzato:
 
-```javascript{2-4,29}
-function WarningBanner(props) {
-  if (!props.warn) {
+```javascript{2-4,28}
+function MessaggioAvviso(props) {
+  if (!props.attenzione) {
     return null;
   }
 
-  return (
-    <div className="warning">
-      Warning!
-    </div>
-  );
+  return <div className="warning">Attenzione!</div>;
 }
 
-class Page extends React.Component {
+class Pagina extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {showWarning: true};
-    this.handleToggleClick = this.handleToggleClick.bind(this);
+    this.state = {mostraAvviso: true};
+    this.handleToggleClick = this.handleToggleClick.bind(
+      this
+    );
   }
 
   handleToggleClick() {
     this.setState(state => ({
-      showWarning: !state.showWarning
+      mostraAvviso: !state.mostraAvviso,
     }));
   }
 
   render() {
     return (
       <div>
-        <WarningBanner warn={this.state.showWarning} />
+        <MessaggioAvviso
+          attenzione={this.state.mostraAvviso}
+        />
         <button onClick={this.handleToggleClick}>
-          {this.state.showWarning ? 'Hide' : 'Show'}
+          {this.state.mostraAvviso ? 'Nascondi' : 'Mostra'}
         </button>
       </div>
     );
   }
 }
 
 ReactDOM.render(
-  <Page />,
+  <Pagina />,
   document.getElementById('root')
 );
-```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010)
+```
+[](codepen://conditional-rendering/4)
 
-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.
+Ritornando `null` dal metodo `render` di un componente, non modifica il comportamnento dei metodi di lifecycle del componente. Ad esempio `componentDidUpdate` viene ancora chiamato.

content/docs/jsx-in-depth.md

@@ -196,7 +196,7 @@ function NumberDescriber(props) {
 }
 ```
 
-You can learn more about [conditional rendering](/docs/conditional-rendering.html) and [loops](/docs/lists-and-keys.html) in the corresponding sections.
+You can learn more about [renderizzazione condizionale](/docs/conditional-rendering.html) and [loops](/docs/lists-and-keys.html) in the corresponding sections.
 
 ### String Literals {#string-literals}
 

content/docs/nav.yml

@@ -24,7 +24,7 @@
     - id: handling-events
       title: Gestione degli Eventi
     - id: conditional-rendering
-      title: Conditional Rendering
+      title: Renderizzazione Condizionale
     - id: lists-and-keys
       title: Lists and Keys
     - id: forms