useState – To-Do List App (sederhana)

import React, { useState } from 'react';

function TodoApp() {
  const [tasks, setTasks] = useState([]);
  const [input, setInput] = useState('');

  const addTask = () => {
    if (input.trim() === '') return;
    setTasks([...tasks, input]);
    setInput('');
  };

  const removeTask = (index) => {
    const newTasks = tasks.filter((_, i) => i !== index);
    setTasks(newTasks);
  };

  return (
    <div>
      <h1>To-Do List</h1>
      <input value={input} onChange={(e) => setInput(e.target.value)} />
      <button onClick={addTask}>Add</button>

      <ul>
        {tasks.map((task, i) => (
          <li key={i}>
            {task} <button onClick={() => removeTask(i)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

• useState([]) menyimpan array tugas.
• useState('') menyimpan teks input.
• setTasks dan setInput digunakan untuk memperbarui state saat user menambahkan/menghapus tugas.