En esta clase vamos a ver las diferencias entre los componentes creados con clases y los componentes creados con funciones y que utilizan los hooks.

• React.Componentes
  • El manejo de las propiedades es el mismo en los dos casos.
  • Para manejar estados, primero debemos crear nuestro método constructor usando “super()” con “props” como parámetro, tenemos que utilizar “this.state” para así definir un objeto cutas propiedad sea el estado. Para poder modificarlo vamos a utilizar el método this.setState.

import React, { Component } from 'react';

class ClassState extends Component {
  constructor(props){
    super(props)
    this.state = {
      error: true
    }
  }

  render() {
    return (
      <div>
        <h2>Eliminar {this.props.name}</h2>
        <p>Por favor, escriba el código de seguridad</p>
        {this.state.error && (
            <p>Ta todo mal</p>
          )}
        <input type='text' placeholder='código de seguridad'/>
        <button onClick={()=>{
            this.setState(prevState => ({error: !prevState.error}))
        }}>Comprobar</button>
      </div>
    );
  }
}

export {ClassState};

• useState
  • El manejo de las propiedades es el mismo en los dos casos.
  • Para el manejo de estado. vamos a utilizar el hook useState como ya lo aprendimos con anterioridad.

import React from 'react'

export function UseState({ name }) {
    const [error, setError] = React.useState(true)
    return (
        <div>
        <h2>Eliminar {name}</h2>
        <p>Por favor, escriba el código de seguridad</p>
        {error && (
            <p>Ta todo mal</p>
        )}
        <input type='text' placeholder='código de seguridad'/>
        <button onClick={
            ()=> setError(!error)
        }>Comprobar</button>
        </div>
      )
}

Diferencias en useEffect