Estados simples: React.Components vs. useStatec

); } export default App;"> ); } export default App;"> ); } export default App;">

import { UseState } from "./UseState.js";
import { ClassState } from "./ClassState.js";
import "./App.css";

function App() {
  return (
    <div className="App">
      <UseState name="Use State" />
      <ClassState name="Class State" />
    </div>
  );
}

export default App;

import React from "react";

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

  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>}

        <input placeholder="Código de seguridad" />
        <button
          onClick={() =>
            this.setState((prevState) => ({
              error: !prevState.error,
            }))
          }
        >
          Comprobar
        </button>
      </div>
    );
  }
}

export { ClassState };

import React from "react";

function UseState({ name }) {
  const [error, setError] = React.useState(false);

  return (
    <div>
      <h2>Eliminar {name}</h2>

      <p>Por favor, escribe el código de seguridad.</p>

      {error && <p>Error: El código es incorrecto.</p>}

      <input placeholder="Código de seguridad" />
      <button onClick={() => setError(!error)}>Comprobar</button>
    </div>
  );
}

export { UseState };

Archivos de la Clase

Lecturas Recomendadas

Clases Relacionadas