Entendiendo Stateful Components en React: Un Viaje Práctico con Tareas Pendientes

Introducción

En React, uno de los conceptos fundamentales que debemos entender es el de «Componentes con Estado» o «Stateful Components». Este concepto se refiere a componentes de React que tienen la capacidad de mantener y gestionar su propio estado interno. ¿Pero qué significa exactamente esto y por qué es tan crucial para el desarrollo de aplicaciones dinámicas y receptivas? Se explorara este concepto a través de un ejemplo con una aplicación de gestión de tareas.

¿Qué son los «Stateful Components»?

React se basa en la construcción de interfaces de usuario mediante componentes, piezas modulares de la interfaz de usuario que pueden tener su propia lógica y estructura. Un «Stateful Component» es aquel que va más allá de ser simplemente una representación visual; tiene la capacidad de recordar información sobre sí mismo, lo que le permite adaptarse y responder a cambios en el entorno de la aplicación.

Nuestra Aplicación: Gestión de Tareas

Imaginemos una aplicación de gestión de tareas. En esta aplicación, tenemos tareas que pueden estar pendientes o completadas. Cada tarea individual se representa mediante el componente TaskItemComponent, que es un ejemplo de un «Stateful Component» en acción. 

El componente TaskItemComponent

import React from 'react';

class TaskItemComponent extends React.Component {
  handleToggleCompleted = () => {
    this.props.onToggleCompleted(this.props.index);
  };

  render() {
    const { description, completed } = this.props;

    return (
      <div className={`form-check ${completed ? 'text-muted' : ''}`}>
        <input
          className="form-check-input"
          type="checkbox"
          checked={completed}
          onChange={this.handleToggleCompleted}
        />
        <label className="form-check-label">{description}</label>
      </div>
    );
  }
}

export default TaskItemComponent;

Integrando componentes en la Aplicación

Ahora, pasemos al componente TaskListComponent. Este componente representa una lista de tareas y utiliza múltiples instancias de TaskItemComponent. 

import React from 'react';
import TaskItemComponent from './TaskItemComponent';

class TaskListComponent extends React.Component {
  handleToggleCompleted = (index) => {
    this.props.onToggleCompleted(index);
  };

  render() {
    const { tasks, title } = this.props;

    return (
      <div className="mt-4">
        <h2>{title}</h2>
        {tasks.map((task, index) => (
          <TaskItemComponent
            key={index}
            index={task.id}
            description={task.description}
            completed={task.completed}
            onToggleCompleted={this.handleToggleCompleted}
          />
        ))}
      </div>
    );
  }
}



export default TaskListComponent;

Para acabar, en el componente principal App, tenemos el estado global de la aplicación, que incluye la lista completa de tareas. Aquí, utilizamos dos instancias de TaskListComponent para mostrar tareas pendientes y otras de tareas completadas

Componente Principal: App

import React from 'react';
import TaskListComponent from './TaskListComponent';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tasks: [
        {id:0, description: 'Comprar espaguetis', completed: true },
        {id:1, description: 'Hacer la cena', completed: false },
        {id:2, description: 'Ir al Karaoke', completed: false },
      ],
    };
  }

  handleToggleCompleted = (id) => {
    this.setState({tasks:this.state.tasks.map(task=>task.id === id ? {...task, completed: !task.completed} : task)});
  };

  render() {
    const { tasks } = this.state;

    const pendingTasks = tasks.filter((task) => !task.completed);
    const completedTasks = tasks.filter((task) => task.completed);

    return (
      <div className="container mt-5">
        <h1 className="mb-4">Lista de Tareas</h1>
        <TaskListComponent
          tasks={pendingTasks}
          title="Pendientes"
          onToggleCompleted={this.handleToggleCompleted}
        />
        <TaskListComponent
          tasks={completedTasks}
          title="Completadas"
          onToggleCompleted={this.handleToggleCompleted}
        />
      </div>
    );
  }
}

export default App;

¿Por qué es «Stateful«?

Este componente es «Stateful» porque tiene su propio estado interno (tasks). Este estado almacena la lista de tareas y el aspecto visual de cada una(si están marcadas como completadas o no) y cómo responde a las interacciones del usuario, como hacer clic en un checkbox, que desencadena la función handleToggleCompleted que actualiza las tasks a través de la función setState que tienen las clases de React.Component.

Conclusión

En resumen, un «Stateful Component» en React es aquel que posee y gestiona su propio estado interno. Este estado puede cambiar en respuesta a interacciones del usuario, eventos, o cualquier otra lógica que se determine. En esta aplicación de gestión de tareas, el componente App es un ejemplo de cómo los «Stateful Components» hacen que las aplicaciones sean dinámicas y receptivas. 

Espero que os sirva 

¡Hasta la próxima!