React - Elevando o state (state lift)

Como visto anteriormente, o fluxo de informações no React é unidirecional, partindo sempre do componente pai para os filhos, logo um componente pai desconhece o que acontece com o estado presente nos seus componentes filhos.

Então como é que nós fazemos quando precisamos que com que um componente filho produza ou modifique um valor para que esse possa ser utilizado pelo componente pai? Bom a resposta para essa pergunta esta no titulo da postagem, resolvemos essa questão com a elevação do "state".

A elevação do "state" em tese é algo relativamente simples, basta mudar o estado do filho para o pai, logo o filho não mais trabalhará com seu estado, ele receberá o estado do pai por meio das "props" e quando for necessário alterar o estado o componente filho deve chamar um método do pai, que também estará presente em "props".

Exemplo

No exemplo abaixo criaremos um componente "filho" que oferece uma lista de opções de acordo com um tipo, ao escolher um item esse valor deve ser retornado para o componente pai:

import React, { Component } from 'react'

class Lista extends Component {

       

    handleClick(codigo) {

        this.props.onOptionChange(codigo);

    }

    render() {

        return(

            <ul>

                {this.props.lista === undefined 

? <li /> 

: this.props.lista.map((item) =>

                    <li 

                        key={item.codigo} 

                        onClick={this.handleClick.bind(this, item.codigo)}

                        value={item.nome}

                        >                        

                        {item.nome}

                    </li>

                )}

            </ul>        

            );            

    }

}

export default Lista

No componente "Lista" recebemos um "array" que é mostrado para seleção, sempre que um item é clicado o mesmo é incluído em uma outra lista no pai.

import React from 'react';

import logo from './logo.svg';

import './App.css';

import Lista from './Lista';

class App extends React.Component {

  listaValores = [

    {codigo: 1007, nome:"Memoria ram", tipo:"PC"},

    {codigo: 1009, nome:"Teclado sem fio", tipo:"PC"},

    {codigo: 1012, nome:"Monitor", tipo:"PC"},

    {codigo: 1109, nome:"Saia", tipo:"VE"},

    {codigo: 1112, nome:"Vestido", tipo:"VE"}

  ];

  constructor(props) {

    super(props);

    this.state = {

      list: []

    };

    this.onOptionChange = this.onOptionChange.bind(this);

  }

  onOptionChange(item) {

    this.setState(state => {

      const list = state.list.concat(item);

      return {

        list

      };

    });

  }

  render() {

    return (

      <div className="App">

        <header className="App-header">

          <img src={logo} className="App-logo" alt="logo" />

          

          <div>

            Escolhidos:

            {this.state.list.toString()}

          </div>

          <div>

            Informática:

            <Lista lista={this.listaValores.filter(

function(item){ return item.tipo === 'PC'})} 

onOptionChange={this.onOptionChange} >

</Lista>

          </div>

          <div>

            Vestuário:

            <Lista lista={this.listaValores.filter(

function(item){ return item.tipo === 'VE'})} 

onOptionChange={this.onOptionChange} >

</Lista>

          </div>

        </header>

        

      </div>

    );

  }

}

export default App;

No componente "App" usamos o componente "Lista" duas vezes, uma com informações sobre informática e outra com informações sobre vestuário, sempre que o componente é usado a coleção de selecionados do pai é atualizada.

O código de exemplo pode ser encontrado aqui.