Usare la logica nei file JSX
JSX è una combinazione di HTML e JavaScript. Se si vuole usare logica, ad esempio per determinare come o se visualizzare qualcosa, usare JavaScript. È possibile usare istruzioni if...else, case o qualsiasi altro tipo di logica booleana.
Operatore ternario
Uno dei modi più diffusi per inserire logica booleana in un'applicazione consiste nell'usare l'operatore ternario. L'operatore ternario consente di creare un'istruzione if...else abbreviata in una singola riga di codice. La sintassi ternaria è costituita da tre componenti: l'espressione booleana, il valore restituito se l'espressione è true e il valore restituito se l'espressione è false.
Se ad esempio si vuole visualizzare un messaggio se un numero è pari o dispari, è possibile scrivere quanto segue:
const number = 3;
console.log(number % 2 ? 'The number is odd' : 'The number is even');
L'espressione viene avviata con il valore booleano (number % 2). Se il numero è dispari, il valore booleano (resto) è 1 o true; verrà restituito il primo valore (The number is odd). Se il numero è pari, il resto è 0, quindi il valore booleano è false; verrà restituito il secondo valore (The number is even). Il codice precedente genera il messaggio The number is odd.
Sitassi ternaria e JSX
È possibile sfruttare questa sintassi per determinare come devono essere visualizzati i valori. Per impostare dinamicamente l'oggetto class di un elemento HTML in base a un valore, è possibile usare quanto segue:
<div className={ isComplete ? 'done' : 'normal' }>{ value }</div>
Nota
Come si può notare, viene usato l'attributo className invece di class. Il motivo è che il termine class è riservato in JavaScript. Per evitare confusione nel runtime, usare invece className.