En esta filosofía de programación reactiva y orientada a componentes, cada pedacito de la UI puede ser un componente y a su vez ese componente tener una UI propiab. En este capítulo haremos que nuestros componentes tengan un estado o componente local.
Vamos a crear un archivo denominado 04_componentes-con-estado.html, que tiene la siguiente sintaxis.
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Componentes con Estado</title> </head> <body> <h1>Componentes con Estado</h1> <form id="todo-form"> <input type="text" id="todo-item" placeholder="Tarea por hacer" /> <input type="submit" value="Agregar" /> </form> <h2>Lista de tareas</h2> <ul id="todo-list"></ul> <script> const d = document; // El State Global const state = { todoList: [], nombre: "", }; // Template UI const template = () => { if (template.data.todoList.length < 1) { return `<p><em>Lista sin tareas por hacer</em></p>`; } let todos = template.data.todoList .map((item) => `<li>${item}</li>`) .join(""); return todos; }; // Agregar State al Template que genera el componente de UI (State Local) template.data = { todoList: [], }; // Render UI const render = () => { console.log("Estado global", state); console.log("Estado local", template.data); const $list = d.getElementById("todo-list"); if (!$list) return; $list.innerHTML = template(); }; // Actualizar el State de manera reactiva const setState = (obj) => { for (let key in obj) { if (template.data.hasOwnProperty(key)) { template.data[key] = obj[key]; } } render(); }; // Obteniendo una copia inmutable del State const getState = () => JSON.parse(JSON.stringify(template.data)); d.addEventListener("DOMContentLoaded", render); // Estableciendo valores por defecto al state setState({ todoList: ["Tarea 1", "Tarea 2", "Tarea 3"], }); d.addEventListener("submit", (e) => { if (!e.target.matches("#todo-form")) return false; e.preventDefault(); const $item = d.getElementById("todo-item"); if (!$item) return; // Actualizar el State de forma reactiva const lastState = getState(); lastState.todoList.push($item.value); setState({ todoList: lastState.todoList, }); // Limpiar el input $item.value = ""; $item.focus(); }); </script> </body> </html>