Fala ai Viviane, tudo bem? Vamos lá:
Entendo que a unidade do autor vai para a variável autor, mas como? o unico local que menciona autor é nessas 2 linhas, como o javascript sabe que um unico autor tem que constar nessa variavel se eu nao atribuo em local nenhum?
Vamos lá, tentarei explicar por partes o processo.
Começando pelo App.js
, temos a declaração do componente Form
:
<Form escutadorDeSubmit={this.escutadorDeSubmit}/>
Repare que o Form
está recebendo uma propriedade chamada escutadorDeSubmit
que será uma referência para a função escutadorDeSubmit
do App.js
.
Dentro do form, podemos ver que ao clicar no botão, ele chama a função submitFormulario
:
<button type="button" onClick={this.submitFormulario}>Salvar</button>
E se a gente olhar o que a função submitFo rmulario
do Form.js
faz:
submitFormulario = () => {
this.props.escutadorDeSubmit(this.state);
this.setState(this.stateInicial);
}
Ela vai chamar a função escutadorDeSubmit
que chegou via propriedade e como parâmetro vai mandar o estado completo do componente Form.js
, no caso:
this.stateInicial = {
nome:'',
livro:'',
preco:'',
}
Ou seja, ele vai enviar um objeto com as proprieades nome
, livro
e preco
. Sabendo que a propriedade escutadorDeSubmit
é uma referência para a função do App.js
, podemos dar uma olhada nela:
escutadorDeSubmit = autor => {
this.setState({ autores:[...this.state.autores, autor]})
}
Repare que ela recebe apenas um parâmetro, no caso, estamos chamando ele de autor
(poderia ser qualquer outro nome).
Dessa maneira, o que foi passado em this.props.escutadorDeSubmit(this.state);
irá chegar na função escutadorDeSubmit = autor =>
.
Se a gente fizer por exemplo:
this.props.escutadorDeSubmit('Matheus');
Na função do App.js
:
// o autor seria = 'Matheus'
escutadorDeSubmit = autor => {
this.setState({ autores:[...this.state.autores, autor]})
}
A ideia é mais ou menos essa.
Espero ter ajudado.