M1A_18.md

M1#A18 - State

this.props e this.state

Sabemos que: this.props : São propriedades passadas do componente pai para o componente filho this.state : é o estado da nossa aplicação, esse estado é gerenciando por um componente statefull que manipula o estado da nossa aplicação.

O que é preciso para criar um state

Um componente statefull é um componente que manipula estado de um aplicação

No caso abaixo o componente App é um componente statefull. Para manipular um estado ele precisa ser criado por uma class ES6 que esteja extendendo um componente React ou utilizando o React.createClass({})que é o método utilizado no ES05. O state não funciona em componentes de função pura

'use strict'

import React, { Component } from 'react'

class App extends Component {

  render () {
    return (
      <div className='container'>
        {this.state}
      </div>
    )
  }
}



export default App

Criando um state

1º - Criamos umaclass e extendemos o component do React

2º - Criamos um contructor(). Para uma Class um constructor é o primeiro método criado e executado dentro dela.

Dentro de constructor criamos e exucutamos o método super() que ao ser executado traz os métodos e as propriedades do component. Basicamente o super executa o component extendido do React e ele traz o this.state

Dentro de constructor nós colocamos o this.state e é nesse único momento que setamos ele dentro do método sendo esse o estado inicianl do nosso componente ou o initialState

'use strict'

import React, { Component } from 'react'

class App extends Component {
  constructor () {
    super();
    this.state = {
      text: 'Luciano' // Estado inicial da propriedade text.
    }
  }

  render () {
    return (
      <div className='container'>
        {this.state.text}
      </div>
    )
  }
}



export default App

Modificando o state

Observação

Da forma abaixo o método this.state.text não aceita o assingment para atualizacão do estado de modificacão

<div className='container' onClick={() => (this.state.text = 'outro texto')}>

A única forma de conseguir modifcar ele é utilizando o método this.setState({}) quando isso acontece ele renderiza novamente e coloca o novo valor. Em passo seria:

1- Quando a aplicação é iniciada o método constructor é executado e o state padrão é colocado e o render é executado renderizando a aplicação.

2- Quando clicarmos no containter o método this.setState será excutado e renderizar novamente o componente só que agora com o novo valor do estado.

'use strict'

import React, { Component } from 'react'

class App extends Component {
  constructor () {
    super();
    this.state = {
      text: 'Luciano',
      numero: 2
    }
  }

  render () {
    return (
      <div className='container' onClick={() => this.setState({
        text: "Olá Bem Vindo"
      })}>
        {this.state.text}
      </div>
    )
  }
}



export default App