Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Outra Solução para Autores e Livros

1)Movi a declaração dos autores do App.js para o index.js

//index.js
const 
  autores = [
      {
          nome: "Paulo",
          livro: "React",
          preco: "1000",
      },
    ...
  ];

2)Alterei a tag Route do index.js trocando o atributo component por render e passei os autores e o tilulo como atributos para o componente Autores

antes:
//index.js
   <Route path='/autores' component={Autores} />
 depois:
   <Route path='/autores' render={props => <Autores autores={autores} titulo="Tabela de Autores Teste"  />} />

3)E no Autores.js no atributo dados troquei o this.state.autores para this.props.autores

//Autores.js
antes:
   <DataTable dados={this.state.autores} titulo={this.state.titulo} colunas={['nome']}/>
 depois:
   <DataTable dados={this.props.autores} titulo={this.props.titulo} colunas={['nome']}/>

4)Adicionei um construtor na classe App.js

//App.js
    constructor(props) {
          super(props);
          this.state = {
              autores: props.autores
          }
    }      

E fiz o mesmo para o Livros.js e tambem para o App.js

E assim unificando a declaração de autores somente no arquivo index.js

Porem, como na solução original, o que é inserido no Formulario através do botão Salvar também não reflete nas paginas de Autores e Livros

1 resposta

Fala ai André, tudo bem? Muito bem, parabéns.

Nesse caso, quando você adicionar um novo dados, você precisa atualizar o estado do App.js, uma vez que ele foi atualizado seus filhos também seriam.

Acho que mais para frente no curso essa duplicidade de estados é removida, pois, irá consumi-los de uma API.

Geralmente quando precisamos compartilhar estados entre components distintos ou que estejam muito distantes, entra o uso do Redux, ele é um famoso gerenciador de estado para aplicações, atuando como fonte de dados para os componentes.

Uma vez que o dado foi atualizado no Redux, os componentes também recebem essa atualização e são renderizados novamente (mais para frente acho que também aborda Redux).

Espero ter ajudado.