El estado en los class components tambien se puede declarar de esta forma, omitiendo el metodo contructor.
Introducción
Dime cómo manejas el estado y te diré...
Estado y ciclo de vida con React.Component
Nuevo proyecto: códigos de seguridad
Estados simples: React.Component vs. useState
Efectos con useEffect
Métodos del ciclo de vida en React.Component
Estados independientes y compuestos
Estados independientes con useState
¿Dónde actualizar el estado?
Estados compuestos con React.Component
Estados compuestos con useState
Código imperativo y declarativo en React
Estados imperativos con useState
Estados semideclarativos con useState
¿Qué es un reducer?
3 formas de crear un reducer
Estados declarativos con useReducer
Action creators y actionTypes
Manejo del estado en TODO Machine
¿Qué son los estados derivados?
Migración de useState a useReducer en useLocalStorage
Imponer tu visión vs. trabajar en equipo
Próximos pasos
¿Quieres más cursos de React.js?
Crea una cuenta o inicia sesión
¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera
Aportes 14
Preguntas 2
El estado en los class components tambien se puede declarar de esta forma, omitiendo el metodo contructor.
Resumen de la clase:
Conoceremos las diferencias entre los componentes creados con clases utilizando React.component y los componentes creados con funciones utilizanod React Hook en el manejo de las propiedades y el estado.
Envio de propiedades (props)
Se envia de la misma forma, sea el componente creado con clase o función:
import { UseState } from './UseState';
import { ClassState } from './ClassState';
import './App.css';
function App() {
return (
<div className="App">
<UseState name="Use State" />
<ClassState name="Class State" />
</div>
);
}
export default App;
Manejo de propiedades en funciones
Para el manejo de propiedades debemos recibirlo como parámetro props el cual puede ser destructurado en las propiedades enviadas
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>El código es es incorrecto</p>
)}
<input type='text' placeholder='código de seguridad'/>
<button>Comprobar</button>
</div>
);
}
Manejo de propiedades en clases
Para el manejo de propiedades escribimos this.props para acceder a las propiedades de nuestro elemento
class ClassState extends React.Component {
render () {
return (
<div>
<h2>Eliminar {this.props.name}</h2>
<p>Por favor, escriba el código de seguridad.</p>
<input type='text' placeholder='código de seguridad'/>
<button>Comprobar</button>
</div>
);
}
}
Manejo de estado en funciones
Utilizamos la siguiente sintaxis para declarar e inicializarr un estado y su modificador de valor.
function UseState({ name }) {
// estado error
const [error, setError] = React.useState(true);
return (
<div>
<h2>Eliminar {name}</h2>
<p>Por favor, escriba el código de seguridad.</p>
{error && (
<p>El código es es incorrecto</p>
)}
<input type='text' placeholder='código de seguridad'/>
<button
// onClick={()=>setError(!error)}
onClick={()=>setError(prevState=>!prevState)}
>Comprobar</button>
</div>
);
}
export { UseState }
Manejo de estado en clases
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, escriba el código de seguridad.</p>
{this.state.error && (
<p>El código es es incorrecto</p>
)}
<input type='text' placeholder='código de seguridad'/>
<button
// onClick={()=>this.setState({ error: !this.state.error})}
onClick={()=>this.setState(prevState => ({error: !prevState.error}))}
>Comprobar</button>
</div>
);
}
}
Esto { }
se llama llaves, aunque después de tantos tutoriales en inglés le digo curly braces 😂
Gracias a dios salieron los Hooks y los componentes como funciones.
Que enredo manejar eso con clases
Props
Las props, en los componentes construídos con React.Component, al ser clases las recibimos usando this.props
a diferencia de los componentes con funciones que solamente llamamos llamar en los parámetros de esta a props o bien desenpaquetamos props.
.
Estado
Para crear el estado en componente con funciones simplemente tenemos que llamar al hook useState
. El nombre del estado y el modificador del estado pueden llamarse como sea.
const [error, setError] = React.useState(true);
En los componentes construídos con React.Component debemos crear nuestro método constructor, pasarle como parámetro las props, al método super();
pasarle las props (esto para tener acceso a los métodos de React.Component).
.
En el constructor crearemos nuestro estado con this.state
. En este objeto almacenará todos nuestros estados.
constructor(props) {
super(props);
this.state = {
error: false,
};
}
Para modificar nuestro estado usaremos el método this.setState
, que tenemos acceso a este porque mandamos a llamar super(props);
. Con este método podemos cambiar nuestros estados.
<button
onClick={() => this.setState({ error: !this.state.error })}
>
Comprobar
</button>
Pueden agregar al import
import React, { useState } from "react";
y luego pueden utilizar useState sin necesidad de agregar React.useState.
const [error, setError] = useState(false);
Para mejorar la experiencia de desarrollo con react, aquí va estas recomendaciones:
Hola,
Así sería en Español e Inglés
() => Paréntesis => parentheses
[] => Corchetes => brackets o square brackets
{} => Llaves => curly brackets
Aqui les dejo mis apuntes por si les hacen falta.
😃
vivan los hooks xd
Conclusión: ¡Gracias a Dios por los hooks!
Asi quedaria con typescript el componente
import { Component } from "react";
interface ClassStateProps {
name: string;
}
interface stateComponent {
error: boolean;
}
class ClassState extends Component<ClassStateProps, stateComponent> {
state: stateComponent = {
error: false,
};
render() {
const { name } = this.props;
return (
<div>
<h2> Eliminar {name}</h2>
<p>Por favor, escribe el codigo de seguridad.</p>
{this.state.error && (
<p>
<strong>Error:</strong> El codigo es incorrecto
</p>
)}
<input placeholder="Codigo de seguridad" />
<button onClick={() => this.setState({ error: !this.state.error })}>
Comprobar
</button>
</div>
);
}
}
export { ClassState };
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.