Input Form

Pada materi kali ini, kita akan membuat form untuk menginput data todo dan juga data category todo tersebut, silakan buka file TaskForm.js yang terletak didalam folder components kemudian masukkan kode berikut ini:

import React, { useState } from "react";
import { InputGroup, FormControl, Button, Form } from "react-bootstrap";

const TaskForm = ({ onAdd }) => {
    const [taskTitle, setTaskTitle] = useState("");
    const [taskCategory, setTaskCategory] = useState("LARAVEL"); 

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log("Title:", taskTitle);  
        console.log("Category:", taskCategory);  
    
        if (taskTitle.trim() && taskCategory) {
            onAdd(taskTitle, taskCategory);  
            setTaskTitle("");
            setTaskCategory("LARAVEL");
        } else {
            alert("Title and Category must be filled out.");
        }
    };
    

    return (
        <InputGroup className="mb-3">
            <FormControl
                placeholder="Add task..."
                value={taskTitle}
                onChange={(e) => setTaskTitle(e.target.value)}
            />

            <Form.Select
                value={taskCategory} 
                onChange={(e) => setTaskCategory(e.target.value)}
                aria-label="Select task category"
            >
                <option value="LARAVEL">LARAVEL</option>
                <option value="REACTJS">REACT JS</option>
            </Form.Select>

            <Button variant="dark" onClick={handleSubmit}>
                ADD
            </Button>
        </InputGroup>
    );
};

export default TaskForm;

Pada fungsi handleSubmit terdapat e.preventDefault() yang bertujuan untuk mencegah halaman refresh saat form dikirim. Kemudian, jika taskTitle tidak kosong dan taskCategory tersedia maka akan memanggil fungsi onAdd(taskTitle, taskCategory) untuk mengirim data tugas ke komponen induk. Apabila data kosong akan muncul alert.

Tampilan Form Input

return (
    <InputGroup className="mb-3">
        <FormControl
            placeholder="Add task..."
            value={taskTitle}
            onChange={(e) => setTaskTitle(e.target.value)}
        />

Pada form input diatas, terdapat onChange={(e) => setTaskTitle(e.target.value)} yang berfungsi untuk memperbarui taskTitle setiap kali terdapat perubahan value pada form input.

Dropdown

Kita juga menambahkan dropdown untuk pemilihan category, dimana Form.Select digunakan untuk memilih kategori todo. Dan memberikan Nilai default LARAVEL pada saat form ini kita akses.

<Form.Select
    value={taskCategory} 
    onChange={(e) => setTaskCategory(e.target.value)}
    aria-label="Select task category"
>
    <option value="LARAVEL">LARAVEL</option>
    <option value="REACTJS">REACT JS</option>
</Form.Select>

Sampai pada materi kali ini, kita berhasil menambahkan component yang berfungsi sebagai form input, pada materi berikutnya, kita akan membuat komponen yang berfungsi untuk menampilkan daftar todo yang berhasil kita input.