React - Uma introdução bem básica - VII

Neste artigo vou apresentar uma introdução bem básica ao React.

Renderizando classes dinamicamente

Atualmente o nosso contador esta sendo exibido na cor azul. (Veja o artigo anterior)

Vamos fazer o seguinte: quando o valor do contador for maior que 10 vamos alterar a cor para verde.

Assim o valor atual do estilo, usado para valores menores que 10, aplicado pelo bootstrap é : className="badge badge-primary m-2">

E quando o valor for maior que 10 teremos que ter o seguinte estilo :  className="badge badge-success m-2">

Na verdade estamos alterando apenas um atributo: de primary para success.

Vamos ver como fazer isso de forma dinâmica dependendo do valor do contador.

Primeiro vamos definir uma variável string que vai receber o valor definido em className que não muda, e a seguir vamos verificar se o valor do contador for maior a 10 e neste caso incluir a string 'success' caso contrário vamos incluir a string 'primary'

Veja como fica o código:

let classes = "badge m-2 badge-";
classes += (this.state.contador > 10 ? "success" : "primary")

Nota: Aqui estamos usando o operador ternário (?) do javascript que usa a sintaxe:   condition ? expr1 : expr2 (se condition for true retorna expr1, senão retorna expr2)

A seguir basta substituir o texto de className pela variável classes: <span style={this.estilos} className={classes}>

Abaixo o código completo:

import React, { Component } from "react";

class Contador extends Component {
  state = { contador: 0 };

  estilos = {
      fontSize: 25,
      fontWeight: "normal"
  };

  render() {    

    let classes = "badge m-2 badge-";
    classes += (this.state.contador > 10 ? "success" : "primary")

    return (
      <React.Fragment>
        <span style={this.estilos} className={classes}>
          {this.formataContador()}
        </span>
        <button onClick={this.tratarIncremento} className="btn btn-secondary">
          Incrementar
        </button>
      </React.Fragment>
    );
  }

  formataContador() {
    const { contador } = this.state;
    return contador === 0 ? "Zero" : contador;
  }

  tratarIncremento = () => {
    this.setState({ contador: this.state.contador + 1 });
  };
}
export default Contador;

Abrindo o navegador veremos o resultado inicial e após incrementar o contador para valores que 10:

Podemos organizar melhor o nosso código e torná-lo mais robusto criando um método e a seguir chamando o método em className.

Vamos criar um método chamado GetBadgeClasses() e a seguir invocá-lo em className como mostrado abaixo:

Agora estamos alterando de forma dinâmica a aparência da nossa interface com base em um valor usando um método.

Na próxima aula veremos como renderizar listas no React.

"Porque o coração deste povo está endurecido,E ouviram de mau grado com seus ouvidos,E fecharam seus olhos;Para que não vejam com os olhos,E ouçam com os ouvidos,e compreendam com o coração,e se convertam,e eu os cure."
Mateus 13:15