Studi Kasus To-Do: Komponen List & Item

Mahir.devv2

Masuk

Studi Kasus To-Do: Komponen List & Item | Dasar TypeScript untuk JavaScript Developer | Mahir.dev | Mahir.dev Academy

src/components/

TodoItem.tsx

Isi kodenya:

File src/components/TodoItem.tsx:

tsx

import React from 'react';
import { Todo } from '../App'; // Impor interface Todo dari App.tsx (atau types.ts)
 
// Definisikan tipe untuk props yang diterima TodoItem
interface TodoItemProps {
  todo: Todo; // Satu objek todo
  // Fungsi-fungsi handler ini akan dikirim dari App.tsx nanti
  onToggleComplete: (id: number) => void;
  onDeleteTodo: (id: number) => void;

Di folder src/components/, bikin file baru TodoList.tsx.

Isi kodenya:

File src/components/TodoList.tsx:

tsx

import React from 'react';
import { Todo } from '../App'; // Impor interface Todo
import TodoItem from './TodoItem'; // Impor komponen TodoItem
 
interface TodoListProps {
  todos: Todo[]; // Array dari objek Todo
  onToggleComplete: (id: number) => void;
  onDeleteTodo: (id: number) => void;
}
 
const TodoList: React.FC<TodoListProps> = ({ todos, onToggleComplete, onDeleteTodo }) => {
  if (todos.length === 0) {
    return <p className="empty-message">Hore, tidak ada tugas! Saatnya santai. 🎉</p>;
  }
 
  return (
    <ul className="todo-list">
      {todos.map(todo => (
        // Untuk tiap objek 'todo' di array 'todos', render satu komponen TodoItem
        <TodoItem
          key={todo.id} // WAJIB! Pake ID unik sebagai key
          todo={todo}   // Kirim objek todo ini sebagai prop ke TodoItem
          onToggleComplete={onToggleComplete} // Teruskan fungsi handler dari App
          onDeleteTodo={onDeleteTodo}         // Teruskan fungsi handler dari App
        />
      ))}
    </ul>
  );
};
 
export default TodoList;

tsx

import React, { useState, useEffect } from 'react';
import './App.css';
import TodoForm from './components/TodoForm';
import TodoList from './components/TodoList'; // <-- IMPORT TodoList
 
export interface Todo {
  id: number;
  text: string;
  isCompleted: boolean;
}
 
function App() {
  const [todos, setTodos] = useState<Todo[]>(() => {
    const savedTodos = localStorage.getItem('todos');
    if (savedTodos) {
      try {
        return JSON.parse(savedTodos) as Todo[];
      } catch (e) {
        console.error("Gagal mem-parse todos dari localStorage:", e);
        return [];
      }
    }
    return [];
  });
 
  useEffect(() => {
    localStorage.setItem('todos', JSON.stringify(todos));
  }, [todos]);
 
  const addTodo = (textDariForm: string) => {
    if (!textDariForm.trim()) return;
    const newTodo: Todo = {
      id: Date.now(),
      text: textDariForm,
      isCompleted: false,
    };
    setTodos(prevTodos => [...prevTodos, newTodo]);
  };
 
  // Fungsi buat toggle status selesai/belum tugas
  const toggleComplete = (idToToggle: number) => { // Kasih tipe ke parameter id
    setTodos(prevTodos =>
      prevTodos.map(todo =>
        todo.id === idToToggle ? { ...todo, isCompleted: !todo.isCompleted } : todo
      )
    );
  };
 
  // Fungsi buat ngehapus tugas
  const deleteTodo = (idToDelete: number) => { // Kasih tipe ke parameter id
    setTodos(prevTodos => prevTodos.filter(todo => todo.id !== idToDelete));
  };
 
  return (
    <div className="app-container">
      <header>
        <h1>Aplikasi To-Do List Saya (React + TS)</h1>
      </header>
      <main>
        <TodoForm onAddTodo={addTodo} />
        
        {/* Render TodoList dan kirim props yang dibutuhkan */}
        <TodoList 
          todos={todos} 
          onToggleComplete={toggleComplete}
          onDeleteTodo={deleteTodo}
        />
      </main>
      <footer className="app-footer"> {/* Tambah class untuk styling footer */}
        <p>Total Tugas: {todos.length} | Selesai: {todos.filter(t => t.isCompleted).length}</p>
      </footer>
    </div>
  );
}
 
export default App;

Proyek To-Do List (React + TS) #3: Nampilin Daftar Tugasnya Biar Kece!

Langkah 1: Membuat Komponen `TodoItem.tsx`

Langkah 2: Membuat Komponen `TodoList.tsx`

Langkah 3: Menggunakan `TodoList` di `App.tsx`

Langkah 4: Styling Tambahan (Opsional)

Coba Jalanin Lagi!

Kuis Komponen List & Item To-Do (React+TS)

Diskusi Pelajaran