Creación de un ToDo List con Emojis usando React y Sustand

Construye una Emoji Todo List con React + TypeScript y la librería de Substance conectando un hook de store, gestionando state local y mapeando texto a emojis. Verás cómo agregar con Enter, renderizar la UI y eliminar ítems con un clic, tal como se implementa paso a paso.

¿Cómo conectar el hook use todo store en un React functional component?

Para iniciar, se define el componente como React Functional Component y se consume el hook personalizado use todo store para obtener todos, add todo y remove todo. Así se pinta el estado inicial y se preparan las acciones para modificarlo.

// Dentro de TodoList (React + TypeScript)
const todos = useTodoStore((state) => state.todos);
const addTodo = useTodoStore((state) => state.addTodo);
const removeTodo = useTodoStore((state) => state.removeTodo);

const [todoText, setTodoText] = useState('');

• use todo store: expone todos, add todo y remove todo.
• Estado local con useState: captura y modifica la entrada del input.
• Pintado inicial: se renderiza la lista con el estado del store.

¿Cómo gestionar el estado local del input?

Se crea todoText con useState('') para escribir y limpiar el campo tras cada inserción.

const handleAddTodo = () => {
  // mapeo a emoji se aplica aquí más adelante
  addTodo(todoText);
  setTodoText('');
};

• Captura la entrada del usuario.
• Agrega el todo y limpia el campo.

¿Cómo disparar la acción con enter?

No se usa botón. Se detecta la tecla Enter con un KeyboardEvent y se llama a handleAddTodo.

const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
  if (e.key === 'Enter') handleAddTodo();
};

• Sin botón: solo teclado.
• Flujo rápido para agregar tareas.

¿Cómo mapear palabras a emojis con TypeScript de forma segura?

Se define un emoji map como objeto clave-valor para transformar palabras como "it" o "sleep" en emojis. Con TypeScript, se tipa como Record<string, string> para validar que tanto la clave como el valor sean string.

const emojiMap: Record<string, string> = {
  it: '🍔',
  sleep: '🛏️',
  exercise: '🏃',
};

const handleAddTodo = () => {
  const mappedText = (emojiMap[todoText.toLowerCase()] ?? todoText).trim();
  addTodo(mappedText);
  setTodoText('');
};

• Record<string, string>: tipado claro de clave y valor.
• toLowerCase(): tolerancia a mayúsculas del usuario.
• ?? todoText: si no hay coincidencia, usa el texto original.
• trim(): evita espacios innecesarios.

¿Cómo renderizar la UI y conectar eventos en React?

Se define el return con un contenedor, el texto “made with Substance”, el título “Emoji Todo List”, el input controlado y la lista de elementos desde el store. Cada elemento se remueve con onClick pasando su id.

return (
  <div>
    <p>made with Substance</p>
    <h2>Emoji Todo List</h2>

    <input
      type="text"
      value={todoText}
      onChange={(e) => setTodoText(e.target.value)}
      onKeyDown={handleKeyDown}
      placeholder="Add a new todo"
    />

    <ul>
      {todos.map((todo) => (
        <li key={todo.id} onClick={() => removeTodo(todo.id)}>
          {todo.text}
        </li>
      ))}
    </ul>
  </div>
);

• Input controlado: value, onChange, placeholder descriptivo.
• Agregar con teclado: onKeyDown para Enter.
• Lista: map con key={todo.id} y onClick para eliminar.

¿Cómo preparar el punto de entrada y la exportación?

Se cambia el render de App a TodoList en main y se asegura export default del componente.

// main.tsx
createRoot(document.getElementById('root')!).render(<TodoList />);

// TodoList.tsx
export default TodoList;

• Ajuste del entry point a TodoList.
• export default para evitar errores de importación.
• Estilos listos desde index.css ya preparado.

Además, se probó la interacción escribiendo “it”, “sleep” y “exercise”, confirmando el mapeo a emojis y la eliminación con clic. Se mencionó que este Emoji Todo List se trabajó con Redux y con Substance, comparando diferencias de uso.

¿Con cuál te quedas: Redux o Substance? Cuéntame en comentarios y por qué elegiste esa opción.