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.