Código de la clase

import React from "react";

**const SECURITY_CODE = "paradigma";**

class ClassState extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      **value: "",**
      error: false,
      loading: false,
    };
  }

  componentDidUpdate() {
    console.log("Actualización");

    if (this.state.loading) {
      setTimeout(() => {
        console.log("Haciendo la validación");

        **if (SECURITY_CODE === this.state.value) {
          this.setState({ error: false, loading: false });
        } else {
          this.setState({ error: true, 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 && !this.state.loading && (
          <p>Error: El código es incorrecto.</p>
        )}**
        {this.state.loading && <p>Cargando...</p>}

        <input
          placeholder="Código de seguridad"
          **value={this.state.value}
          onChange={(event) => {
            this.setState({ value: event.target.value });
          }}**
        />
        <button onClick={() => this.setState({ loading: true })}>
          Comprobar
        </button>
      </div>
    );
  }
}

export { ClassState };

Archivos de la Clase

Estados compuestos con React.Component

https://github.com/FROSTYLAN/SecurityApp/commit/54691467743e9b4378a699ad07998441cc482cec

Clases Relacionadas

Composición de componentes con React Context

Composición de componentes sin React Context

Composición y colocación del estado en React

Análisis de rutas y componentes en React

Trabajando en React con Styled Components

Arquitectura de internacionalización para componentes en React

¿Dónde actualizar el estado?

Estados compuestos con useState