Ao estruturar o novo código seguindo a aula, está dando seguinte erro no console:
Autor.js:123 Uncaught (in promise) TypeError: _this5.props.callbackAtualizaListagem is not a function
at Autor.js:123
Segue meu código da classe Autor.js
import React, { Component } from 'react';
import SimpleInput from './components/SimpleInput';
import SubmitButton from './components/SubmitButton';
class AutorForm extends Component {
constructor() {
super();
this.state = {lista : [],nome:'',email:'', senha:''};
this.sendForm = this.sendForm.bind(this);
this.setNome = this.setNome.bind(this);
this.setEmail = this.setEmail.bind(this);
this.setSenha = this.setSenha.bind(this);
}
sendForm(event) {
event.preventDefault();
fetch('http://cdc-react.herokuapp.com/api/autores', {
method: 'post',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
nome: this.state.nome,
email: this.state.email,
senha: this.state.senha,
})
})
.then((response) => {
return response.json() })
.then((json) => {
this.setState({lista: json});
})
.catch(error => {
console.log('Request failed', error);
});
}
setNome(event){
this.setState({nome:event.target.value});
}
setEmail(event){
this.setState({email:event.target.value});
}
setSenha(event){
this.setState({senha:event.target.value});
}
render() {
return (
<div className="pure-form pure-form-aligned">
<form className="pure-form pure-form-aligned" onSubmit={this.sendForm} method='post'>
<SimpleInput id="nome" type="text" name="nome" value={this.state.nome} onChange={this.setNome} label="Nome" />
<SimpleInput id="email" type="text" name="email" value={this.state.email} onChange={this.setEmail} label="Email" />
<SimpleInput id="senha" type="password" name="senha" value={this.state.senha} onChange={this.setSenha} label="Senha" />
<div className="pure-control-group">
<label></label>
<SubmitButton label="Gravar"/>
</div>
</form>
</div>
);
}
}
class AutorTable extends Component {
render() {
return (
<div>
<table className="pure-table">
<thead>
<tr>
<th>Nome</th>
<th>email</th>
</tr>
</thead>
<tbody>
{
this.props.lista.map(function(autor){
return (
<tr key={autor.id}>
<td> {autor.nome} </td>
<td> {autor.email} </td>
</tr>
);
})
}
</tbody>
</table>
</div>
);
}
}
export default class AutorBox extends Component {
constructor() {
super();
this.state = {lista : []};
this.atualizaListagem = this.atualizaListagem.bind(this);
}
componentDidMount() {
const url = 'http://cdc-react.herokuapp.com/api/autores';
fetch(url, {
method: 'GET'
}).then((response) => {
return response.json() })
.then((json) => {
this.props.callbackAtualizaListagem(json);
});
}
atualizaListagem(novaLista) {
this.setState({lista:novaLista});
}
render() {
return (
<div>
<AutorForm callbackAtualizaListagem={this.atualizaListagem} />
<AutorTable lista={this.state.lista} />
</div>
)
}
}