Usando o Hook de estados (useState)

Para ser facil de nós entendermos vamos ver um antes e depois, antes para ter estados dentro de um componente precisavamos criar um componente em formato de class:

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      contador: 0
    }
  }

  render() {
    return (
      <div>
        <p>Você clicou {this.state.count} vezes</p>
        <button onClick={() => this.setState({ count: this.state.contador + 1 })}>
          Aperte-me
        </button>
      </div>
    )
  }
}

Agora usando a api do hooks não precisamos mais de um componente em formato de class para ter estados, vamos ao exemplo:

import React, { useState } from 'react'

function App() {

  const [contador, setContador] = useState(0);
 // Criamos um state chamado "contador"
 

  return (
    <div>
      <p>Você clicou {contador} vezes</p>
      <p>Olá sou o  {nome} </p>
      <button onClick={() => setCount(contador + 1)}>Aperte-me</button>
    </div>
  )
}

Criamos um state chamado “contador” e dentro do parenteses useState(0) colocamos o valor que essa state deve iniciar ou seja o valor inicial dela.

Para atualizar o valor da state usamos o segundo item do nosso array o setContador, ou seja precisamos chamar setContador() e dentro dos parenteses o valor que deseja alterar.

Ou seja não vamos mais user o this.setState(…) para alterar um valor do estado, agora cada estado vai ter seu nome e seu proprio metodo para alterar o valor dele.

E para mostrar esse state no nosso componente não precisamos mais de this.state.contador  podemos chamar simplesmente nome que colocamos no state como no exemplo acima foi o contador.

Exemplo, vamos supor que nós quiséssemos criar um novo state que armazene o nome e esse nome começe já com valor inicial Sujeito:

import React, { useState } from 'react'

function App() {

  const [contador, setContador] = useState(0);
  const [nome, setNome] = useState('Sujeito');
 // Criamos um state chamado "nome" que já comeca com valor Sujeito.
 

  return (
    <div>
      <p>Você clicou {contador} vezes</p>
      <button onClick={() => setCount(contador + 1)}>Aperte-me</button>
    </div>
  )
}

Show de bola, facil facil 🙂

Baixe nosso Guia completo para te levar para o próximo nivel com React:

Receber conteúdo!