Bài Tập ReactJS – Quản Lý Sách

Tạo component Books.jsx để quản lý thông tin sách bằng useState.

Yêu cầu kiến thức sử dụng

• useState
• State kiểu:
  • string
  • number
  • array
  • object
• map()
• onChange
• onClick
• Hiển thị dữ liệu bằng JSX

Yêu cầu bài toán

1. Tạo tiêu đề

Hiển thị tiêu đề:

Book Manager

2. Tạo form nhập thông tin sách

Form gồm các trường:

3. Khai báo state

Sử dụng useState để tạo:

• title
• bookName
• author
• price
• category

4. Tạo mảng danh sách sách

Khai báo:

const [books, setBooks] = useState([])

Dùng để lưu danh sách sách.

5. Tạo object mẫu

Khai báo object item gồm:

{
    bookName: "...",
    author: "...",
    price: ...,
    category: "..."
}

Hiển thị object này trong bảng.

6. Tạo nút Add

Khi nhấn nút:

• Thêm sách mới vào mảng books
• Cập nhật lại giao diện bằng setBooks

7. Hiển thị danh sách sách

Tạo bảng gồm các cột:

| STT | Book Name | Author | Price | Category |

Yêu cầu:

• Hiển thị object mẫu
• Dùng map() để hiển thị danh sách từ mảng books

Yêu cầu nâng cao (nếu làm được)

Bài 1

Sau khi Add:

• Xóa trắng các ô input

Bài 2

Nếu Price nhỏ hơn 0:

• Hiển thị alert:

Price không hợp lệ

Bài 3

Hiển thị tổng số sách:

Ví dụ:

Total Books: 5

Kết quả mong muốn

Người dùng:

1. Nhập thông tin sách
2. Nhấn Add
3. Dữ liệu hiển thị xuống bảng bên dưới