import React from "react";
class ClassState extends React.Component {
constructor(props) {
super(props);
this.state = {
error: false,
**loading: false,**
};
}
**componentDidUpdate() {
console.log("Actualización");
if (this.state.loading) {
setTimeout(() => {
console.log("Haciendo la validación");
this.setState({ loading: false });
console.log("Terminando la validación");
}, 3000);
}
}**
render() {
return (
<div>
<h2>Eliminar {this.props.name}</h2>
<p>Por favor, escribe el código de seguridad.</p>
{this.state.error && <p>Error: El código es incorrecto.</p>}
{this.state.loading && <p>Cargando...</p>}
<input placeholder="Código de seguridad" />
**<button onClick={() => this.setState({ loading: true })}>**
Comprobar
</button>
</div>
);
}
}
export { ClassState };
Métodos del ciclo de vida en React.Component
https://github.com/FROSTYLAN/SecurityApp/commit/5f6a5eff9fa7a09a44f852fdb5fcf63dd11d8bc9
Qué es y cómo funciona un componente en React | Platzi Cursos
Ciclo de vida de un componente de React.js