freeCodeCamp/guide/portuguese/certifications/front-end-libraries/react/use-a-ternary-expression-fo.../index.md

1.1 KiB

title localeTitle
Use a Ternary Expression for Conditional Rendering Use uma expressão ternária para renderização condicional

Use uma expressão ternária para renderização condicional

Este desafio é usar a expressão Ternary somente em vez de usar If/Else no código,

Sugestão

O operador ternário possui três partes, mas você pode combinar várias expressões ternárias juntas. Aqui está a sintaxe básica:

condition ? expressionIfTrue : expressionIfFalse 

Solução

Aqui está uma solução de exemplo de uso da expressão ternária. Primeiro você precisa declarar estado no construtor como este

constructor(props) { 
    super(props); 
    // change code below this line 
      this.state = { 
        input: '', 
        userAge: '' 
      } 
    // change code above this line 
    this.submit = this.submit.bind(this); 
    this.handleChange = this.handleChange.bind(this); 
  } 

Então o operador ternário

{ 
    /* change code here */ 
    (this.state.userAge >= 18) ? buttonTwo : (this.state.userAge== '')? buttonOne: buttonThree 
 
 }