El estado en los class components tambien se puede declarar de esta forma, omitiendo el metodo contructor.
Introducción
Manejo Avanzado del Estado en React.js
Estado y ciclo de vida con React.Component
Creación de Proyectos React y Manejo de Estado con Hooks y Clases
Diferencias entre Componentes de Clase y Función en React
Efectos y ciclo de vida en componentes React con useEffect
Métodos del ciclo de vida en componentes de clase React
Estados independientes y compuestos
Diferencias entre estados simples y compuestos en React
Actualización de estados en interfaces de usuario con React
Estados Compuestos en Componentes de Clase con React
Estados Compuestos con React.UseState: Manejo y Actualización Eficiente
Código imperativo y declarativo en React
Programación Imperativa vs Declarativa: Implementación en React
Programación Declarativa: Simplificación y Abstracción de Estados
Uso de UseReducer para manejar el estado en React
Creación de Reducers: If, Switch y Reducer Objects en React
Manejo de estados con useReducer en React
Manejo de Action Types y Action Creators en React Reducers
Manejo del estado en TODO Machine
Manejo de Estados Derivados en React con useState
Migración de UseState a UseReducer en React
Optimización de Custom Hooks en React sin UseReducer
Próximos pasos
Manejo Profesional del Estado en React con Hooks y Reducers
Crea una cuenta o inicia sesión
¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera
El manejo de props en React es una habilidad fundamental para crear componentes reutilizables y dinámicos. Cuando llamamos a un componente dentro de otro, podemos enviarle propiedades de la misma manera que pasamos atributos a etiquetas HTML. Esto es idéntico tanto para componentes creados con clases como con funciones utilizando React Hooks.
this.props
. Esto nos permite trabajar con estas propiedades dentro de cualquier método del componente.Ambos métodos permiten reflejar cambios dinámicos en la interfaz cada vez que cambian las props.
El estado en los componentes funcionales de React se gestiona utilizando useState
, una herramienta fundamental de React Hooks. Con useState
, definimos estados de manera más concreta y directa:
useState
para declarar un array que contiene el estado actual y una función para actualizarlo.const [estado, setEstado] = React.useState(estadoInicial);
setEstado
), que puede tomar el valor actual y devolver una nueva versión del estado.Este manejo es más sencillo y claro, ofreciendo la flexibilidad de definir múltiples estados de forma individual y con nombres personalizados, facilitando el trabajo en equipo y el mantenimiento del código.
El enfoque para manejar el estado en componentes creados con clases difiere notablemente. Debemos definir un estado único, this.state
, que contiene un objeto donde se agrupan todas las propiedades del estado:
React.Component
, debemos asegurarnos de llamar a super(props)
antes de modificar this
.constructor(props) {
super(props);
this.state = { propiedadInicial: valor };
}
this.setState()
para cambiar el estado. Este enfoque acepta un objeto como argumento para especificar los cambios.this.setState({ propiedad: nuevoValor });
setState
que tome el estado previo como argumento para generar actualizaciones más complejas y controladas.Este método, aunque menos flexible que los hooks, permite aprovechar la herencia de React.Component
, facilitando el uso de métodos predefinidos de React.
Finalmente, uno de los casos de uso más comunes al trabajar con el estado en React es mostrar u ocultar mensajes, como notificaciones de error, basadas en condiciones del estado:
Con React Hooks y useState
:
true
o false
), controlando así cuándo se muestra un mensaje de error.En componentes de clase:
this.state
.this.setState()
para cambiar el estado en respuesta a eventos.Ambos métodos son eficaces para manipular dinámicamente la UI en función del estado. Aprender a usar estos patrones es clave para crear aplicaciones React robustas e interactivas.
Estas diferencias entre componentes funcionales y de clase, en particular en el manejo de props y estados, pueden influir significativamente en cómo estructuramos y mantenemos nuestro código React.
Aportes 25
Preguntas 3
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);
Hola,
Así sería en Español e Inglés
() => Paréntesis => parentheses
[] => Corchetes => brackets o square brackets
{} => Llaves => curly brackets
Para mejorar la experiencia de desarrollo con react, aquí va estas recomendaciones:
Aqui les dejo mis apuntes por si les hacen falta.
😃
Conclusión: ¡Gracias a Dios por los hooks!
Los corchetes se llaman curly braces.
vivan los hooks xd
Estoy amando este curso, ahora todos los cursos sobre frameworks están cobrando sentido, los estoy llevando a mi parte liminal del cerebro!!!
Todo gracias a que se toman el tiempo para explicar más rápido, pero con más precisión que hace cada cosa, y desde el principio. Ojala todos los cursos de platzi fueran así, muchos si lo son, pero muchos otros no.
Mi sugerencia es que los módulos de introducción sirvan para hacer precisamente esto, explicar rápido, pero de manera precisa el conocimiento previo que se necesita para abordar el curso, tomando la información ya vista en otros cursos, no tomar todo, solamente y de manera rápida, pero muy precisa el conocimiento preciso que se necesita para aprovechar el curso a realizar.
Así, quien quiera consolidar conocimiento previo toma el módulo de introducción y quienes quieren ir directo a lo pesado del curso se lo pueden saltar.
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 };
Escribe el código de seguridad para eliminar.
{error && ( <>Error: El código es incorrecto.
)}.
En ambos casos podemos enviar propiedades con sus respectivos valores en este caso name
.
.
function App() {
return (
<div className="App">
<UseState name="UseState" />
<ClassState name="ClassState" />
</div>
);
}
.
En el componente de tipo función podemos recibirlo como props
y llamarlo con props.name
o también podemos destructurarlo y recibirlo como {name}
y llamarlo con name
.
.
function UseState({name}) {
return (
<div>
<h2>Eliminar {name}</h2>
<p>Por favor, escribe el código de seguridad.</p>
<input placeholder="Código de seguridad" />
<button>Comprobar</button>
</div>
);
}
.
El componentes de tipo clase recibimos las propiedades automáticamente en this.props
, por lo cual podemos llamara a la propiedad en cuestión con this.props.name
.
.
class ClassState extends React.Component {
render() {
return (
<div>
<h2>Eliminar {this.props.name}</h2>
<p>Por favor, escribe el código de seguridad.</p>
<input placeholder="Código de seguridad" />
<button>Comprobar</button>
</div>
);
}
}
.
A continuación se implementa un estado de error que se irá mostrándo o no según hagamos click en el botón de Comprobar
.
.
En los componentes de tipo función podemos hacer uso de useState
para crear este estado y por medio de un onClick utilizamos una función flecha para cambiar el estado.
.
function UseState({ name }) {
const [error, setError] = React.useState(true);
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>
);
}
```.
Incluso se puede cambiar el estado utilizando el estado previo de la siguiente manera.
.
```jsx
onClick={() => setError(prevState => !prevState)}
.
Por otro lado, en los componentes de tipo clase la cosa es algo diferente. En primer lugar, creamos nuestro constructor y vamos a tener un único estado this.state
dentro del cual podemos tener un objeto con cada uno de los estado como una propiedad de este objeto.
.
Entonces en lugar de acceder a error
como en el componente de tipo función, en el componente de tipo clase accederemos a la propiedad this.state.error
.
.
Es importante destacar que hay que llamar al super(props)
dentro del constructor cuando estemos usando clases derivadas o que extienden de otras antes de acceder o modificar this
.
.
Si bien recibimos las propiedades por medio del constructor es importante pasarlos también a la clase React.Component
utilizando super(props)
para que luego se nos permita agregarle propiedades o métodos a nuestro this
.
.
class ClassState extends React.Component {
constructor(props) {
super(props);
this.state = {
error: true,
};
}
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>
);
}
}
.
También vamos a poder actualizar el estado de los componentes de tipo clase por medio de this.setState
, de aquí la convención de llamar setState a los actualizadores de nuestros estados, puesto que este método lo heredamos de React.Component
al momento de llamar a super(props)
.
.
Entonces lo que hacemos es llamar a this.setState
e al igual que en los componentes de tipo función podemos obtener el estado previo de nuestro estado y actualizarlo. En este caso es necesario mandar un objeto con las propiedades correspondientes a los estados que queremos actualizar, por lo cual al estado de error
le vamos a asignar su estado previo pero negado, es decir !prevState.error
.
.
Otra forma de hacer esto es de la siguiente manera.
.
onClick={() => setError({ error: !this.state.error })}
.
Finalmente es importante tener en cuenta como funcionan las funciones flechas, puesto que cuando tratamos de devolver un objeto se debe de utilizar un return de forma explícita, o en su lugar envolver el objeto en paréntesis.
.
/*
No se está retornando nada
En su lugar tenemos el bloque de nuestra función
Dentro del bloque incluso podemos escribir distintas lineas de Javascript
*/
(prevState) => { error: !prevState.error }
// return con paréntesis
(prevState) => ({ error: !prevState.error })
// Return de forma explícita
(prevState) => { return { error: !prevState.error } }
Porfavor que horrible trabajar componentes con clases, me quedo toda la vida con los funcionales…
Código de la clase en TypeScript
import { ClassState } from './ClassState'
import { UseState } from './UseState'
import './App.css'
function App() {
return (
<>
<UseState name='UseState' />
<ClassState name='ClassState' />
</>
)
}
export default App
import { FC, useState } from "react"
type Props = {
name: string
}
const UseState:FC<Props> = ({ name }) => {
const [error, setError] = useState(true);
return(
<div>
<h2>Eliminar { name }</h2>
<p>Por favor, escribe el código de seguridad para comprobar que quieres eliminar</p>
{error && (
<p>El código es incorrecto</p>
)}
<input type="text" placeholder="Código de seguridad" />
<button
onClick={()=>{setError(prevState=>!prevState)}}
>Comprobar</button>
</div>
)
}
export { UseState }
import { Component, ReactNode } from "react";
type Props = {
name: string
}
type State = {
error: boolean
}
class ClassState extends Component<Props, State>{
// constructor(props: Props){
// super(props)
// this.state = {
// error: true
// }
// }
state:State = {
error: true
};
render(): ReactNode {
return(
<div>
<h2>Eliminar { this.props.name }</h2>
<p>Por favor, escribe el código de seguridad para comprobar que quieres eliminar</p>
{this.state.error && (
<p>El código es incorrecto</p>
)}
<input type="text" placeholder="Código de seguridad" />
<button
onClick={()=>{this.setState(prevState=>({error: !prevState.error}))}}
>Comprobar</button>
</div>
)
}
}
export { ClassState }
Si quieren hacer el proyecto en Next js, TypeScript y Tailwind CSS les dejo el código:
UseState.tsx:
import React from "react";
const UseState = (props: { name: string }) => {
const [error, setError] = React.useState(false);
const { name } = props;
return (
<section className="flex flex-col items-center w-screen h-96 justify-evenly">
<h2 className="text-3xl font-bold">Eliminar {name}</h2>
<p className="text-2xl ">Por favor, escribe el código de seguridad</p>
{error && (
<p className="text-xl font-medium text-red-600">
error: el código es incorrecto
</p>
)}
<div className="flex ">
<input
placeholder="Código de seguridad"
className="p-2 mx-4 text-xl text-center border-2 rounded-md"
/>
<button
className="p-2 text-xl font-semibold bg-green-200 border-2 border-green-700 rounded-md shadow-lg cursor-pointer text-slate-950 hover:bg-green-800 hover:text-slate-100"
onClick={() => setError(!error)}
>
Comprobar
</button>
</div>
</section>
);
};
export default UseState;
ClassState.tsx
import React from "react";
type MyProps = {
name: string;
};
type MyState = {
error: boolean;
};
class ClassState extends React.Component<MyProps, MyState> {
state: MyState = {
error: false,
};
render() {
const { name } = this.props;
const { error } = this.state;
return (
<section className="flex flex-col items-center w-screen h-96 justify-evenly">
<h2 className="text-3xl font-bold ">Eliminar {name}</h2>
<p className="text-2xl ">Por favor, escribe el código de seguridad</p>
{error && (
<p className="text-xl font-medium text-red-600">
error: el código es incorrecto
</p>
)}
<div className="flex ">
<input
placeholder="Código de seguridad"
className="p-2 mx-4 text-xl text-center border-2 rounded-md"
/>
<button
className="p-2 text-xl font-semibold bg-green-200 border-2 border-green-700 rounded-md shadow-lg cursor-pointer text-slate-950 hover:bg-green-800 hover:text-slate-100"
onClick={() => this.setState({ error: !error })}
>
Comprobar
</button>
</div>
</section>
);
}
}
export default ClassState;
Espero les sirva!!!
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?