React - Excluindo dados em uma API dotNet Core
Nesta aula iremos melhorar nosso layout de lista e criar a ação de excluir dos registros
Assine nossa Comunidade
.Net Core - ReactJS - Excluindo dados
Na aula de hoje vamos fazer a exclusão dos dados do cliente.
Vamos criar o método excluir e também criar o método lista para recarregar a página após a exclusão.
Criaremos um componente button e no onClick, chamaremos o método excluir.
class Clientes extends Component {
state = {
clientes: []
}
componentDidMount(){
this.lista()
})
}
lista = () => {
axios.get('https://localhost:5001/clientes').then(response => {
const clientes = response.data
this.setState({ clientes })
})
}
excluir = (cliente) => {
if(window.confirm("Deseja realmente excluir?")){
axios.put('https://localhost:5001/clientes/${this.state.cliente.id}').then(response => {
this.lista()
})
}
}
render() {
return (
< div>
< Header>< /Header>
< main className="col-lg-7 mb-5">
< h1 className="display-5 mb-3 fw-semibold lh-sm">Lista de Clientes - { this.clientes.length }< /h1>
< table className="table"
< thead>
< tr>
< th>Nome< /th>
< th>Telefone< /th>
< th>endereço< /th>
< /tr>
< thead>
< tbody>
{
this.state.clientes.map((cliente, index) => (
< tr key={index}>
< td>{cliente.nome}< /td>
< td>{cliente.telefone}< /td>
< td>{cliente.endereco}< /td>
< td>< Link Link to={ `/cliente/${cliente.id}` } > {cliente.id} < /Link> Editar< /td>
< td>
< button className="btn btn-danger" onClick={() => { this.excluir(cliente)}}> Excluir < /button>
< /td>
< /tr>
))
}
< /tbody>
< /table>
< Link className="btn btn-primary" to={ `/cliente/novo` } > Novo < /Link>
< /main>
< Footer>< /Footer>
< /div>
)
}
}
export default Clientes;
React - Excluindo dados em uma API dotNet Core
Nesta aula iremos melhorar nosso layout de lista e criar a ação de excluir dos registros
Assine nossa Comunidade
.Net Core - ReactJS - Excluindo dados
Na aula de hoje vamos fazer a exclusão dos dados do cliente.
Vamos criar o método excluir e também criar o método lista para recarregar a página após a exclusão.
Criaremos um componente button e no onClick, chamaremos o método excluir.
class Clientes extends Component {
state = {
clientes: []
}
componentDidMount(){
this.lista()
})
}
lista = () => {
axios.get('https://localhost:5001/clientes').then(response => {
const clientes = response.data
this.setState({ clientes })
})
}
excluir = (cliente) => {
if(window.confirm("Deseja realmente excluir?")){
axios.put('https://localhost:5001/clientes/${this.state.cliente.id}').then(response => {
this.lista()
})
}
}
render() {
return (
< div>
< Header>< /Header>
< main className="col-lg-7 mb-5">
< h1 className="display-5 mb-3 fw-semibold lh-sm">Lista de Clientes - { this.clientes.length }< /h1>
< table className="table"
< thead>
< tr>
< th>Nome< /th>
< th>Telefone< /th>
< th>endereço< /th>
< /tr>
< thead>
< tbody>
{
this.state.clientes.map((cliente, index) => (
< tr key={index}>
< td>{cliente.nome}< /td>
< td>{cliente.telefone}< /td>
< td>{cliente.endereco}< /td>
< td>< Link Link to={ `/cliente/${cliente.id}` } > {cliente.id} < /Link> Editar< /td>
< td>
< button className="btn btn-danger" onClick={() => { this.excluir(cliente)}}> Excluir < /button>
< /td>
< /tr>
))
}
< /tbody>
< /table>
< Link className="btn btn-primary" to={ `/cliente/novo` } > Novo < /Link>
< /main>
< Footer>< /Footer>
< /div>
)
}
}
export default Clientes;