Studi Kasus To-Do: Komponen Form & Add

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

src/components/TodoForm.tsx

tsx

import React, { useState, FormEvent, ChangeEvent } from 'react';
 
// Definisikan tipe untuk props yang diterima TodoForm
interface TodoFormProps {
  // onAddTodo adalah fungsi yang nerima satu argumen string (teks tugas)
  // dan gak nge-return apa-apa (void)
  onAddTodo: (text: string) => void;
}
 
// Komponen TodoForm adalah Functional Component yang nerima props bertipe TodoFormProps
const TodoForm: React.FC<TodoFormProps> = ({ onAddTodo }) => {
  // State lokal buat nyimpen teks yang lagi diketik di input
  const [inputText, setInputText] = useState<string>('');
 
  // Fungsi handler buat ngupdate state inputText pas input berubah
  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
    setInputText(event.target.value);
  };
 
  // Fungsi handler buat pas form di-submit
  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault(); // Cegah reload halaman default
    
    const teksTugas = inputText.trim(); // Ambil nilai input & hilangkan spasi ekstra
    if (!teksTugas) { // Validasi simpel: jangan tambah kalau kosong
      alert("Tugas tidak boleh kosong!");
      return;
    }
 
    onAddTodo(teksTugas); // Panggil fungsi onAddTodo dari props (yang aslinya ada di App.tsx)
    setInputText(''); // Kosongin lagi input field setelah tugas ditambah
  };
 
  return (
    <form onSubmit={handleSubmit} className="todo-form">
      <input
        type="text"
        value={inputText}
        onChange={handleInputChange}
        placeholder="Ketik tugas baru di sini..."
        className="todo-input"
        aria-label="Input tugas baru" // Untuk aksesibilitas
      />
      <button type="submit" className="todo-button">
        Tambah Tugas
      </button>
    </form>
  );
};
 
export default TodoForm;

import React, { useState, FormEvent, ChangeEvent } from 'react';:
- Kita impor useState buat state lokal.
- FormEvent dan ChangeEvent adalah tipe-tipe event dari React yang bakal kita pake buat ngasih tipe ke parameter event di fungsi handler kita. ChangeEvent buat input, FormEvent buat submit form. HTMLInputElement dan HTMLFormElement adalah tipe elemen DOM yang terkait.
interface TodoFormProps { ... }:
- Kita bikin interface buat ngedefinisiin "kontrak" props yang bakal diterima komponen TodoForm.
- onAddTodo: (text: string) => void;: Ini properti prop yang PENTING! Dia ngasih tau kalau TodoForm bakal nerima prop namanya onAddTodo. Nilai prop ini harus berupa fungsi yang:
  - Nerima satu argumen text yang tipenya string.
  - Gak nge-return nilai apa-apa (void). Ini adalah fungsi callback yang bakal dikirim dari komponen App buat nanganin penambahan todo baru.
const TodoForm: React.FC<TodoFormProps> = ({ onAddTodo }) => { ... }:
- Kita definisiin TodoForm sebagai functional component.
- React.FC<TodoFormProps>: Ini cara ngasih tau TypeScript kalau TodoForm itu Functional Component yang props-nya harus sesuai sama interface TodoFormProps.
- ({ onAddTodo }): Kita langsung destructure prop onAddTodo dari objek props.
const [inputText, setInputText] = useState<string>('');:
- State lokal inputText buat nyimpen apa yang diketik pengguna di input field. Tipenya string, nilai awalnya string kosong.
handleInputChange = (event: ChangeEvent<HTMLInputElement>) => { ... }:
- Fungsi handler buat event onChange di input.
- event: ChangeEvent<HTMLInputElement>: Kita kasih tipe ke parameter event. Ini ngasih tau TS kalau event.target itu adalah HTMLInputElement, jadi event.target.value pasti ada dan tipenya string.
- setInputText(event.target.value);: Ngupdate state inputText tiap kali pengguna ngetik.
handleSubmit = (event: FormEvent<HTMLFormElement>) => { ... }:
- Fungsi handler buat event onSubmit di form.
- event: FormEvent<HTMLFormElement>: Ngasih tipe ke parameter event.
- event.preventDefault();: Mencegah form ngelakuin submit HTML biasa yang bikin halaman reload.
- const teksTugas = inputText.trim();: Ngambil nilai dari state inputText dan ngilangin spasi di awal/akhir.
- Validasi simpel biar tugas kosong gak ditambahin.
- onAddTodo(teksTugas);: Ini dia intinya! Kita manggil fungsi onAddTodo yang kita dapet dari props, sambil ngasih teksTugas sebagai argumen. Fungsi ini (yang sebenernya ada di App.tsx) yang bakal bener-bener nambahin tugas ke state todos utama.
- setInputText('');: Kosongin lagi input field-nya.
Return JSX:
- Ngerender elemen <form> dengan handler onSubmit.
- Elemen <input> jadi controlled component:
  - value={inputText}: Nilainya dikontrol sama state inputText.
  - onChange={handleInputChange}: Perubahannya ngupdate state.
- aria-label di input buat aksesibilitas.

tsx

import React, { useState, useEffect } from 'react';
import './App.css';
import TodoForm from './components/TodoForm'; // <-- IMPORT TodoForm
// import TodoList from './components/TodoList'; // Nanti kita impor
 
export interface Todo { // Interface Todo tetep di sini atau di file types.ts
  id: number;
  text: string;
  isCompleted: boolean;
}
 
function App() {

Proyek To-Do List (React + TS) #2: Bikin Form Kece Buat Nambah Tugas!

Langkah 1: Membuat File Komponen `TodoForm.tsx`

Langkah 2: Memodifikasi `App.tsx` untuk Menggunakan `TodoForm` dan Fungsi `addTodo`

Langkah 3: Styling Dasar (Opsional, tapi Biar Keliatan)

Coba Jalanin!

Kuis Komponen Form & Add To-Do (React+TS)

Diskusi Pelajaran