Gestion des livres

import React, { useState } from "react";

const BookManagement = () => {
  const [books, setBooks] = useState([]);
  const [formData, setFormData] = useState({ title: "", author: "", publicationDate: "" });

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (formData.title.trim() !== "" && formData.author.trim() !== "" && formData.publicationDate.trim() !== "") {
      setBooks([...books, { id: Date.now(), ...formData }]);
      setFormData({ title: "", author: "", publicationDate: "" });
    }
  };

  const handleDelete = (id) => {
    const updatedBooks = books.filter(book => book.id !== id);
    setBooks(updatedBooks);
  };

  return (
    <div>
      <h1>Book Management</h1>
      <form onSubmit={handleSubmit}>
        <label>
          Title:
          <input type="text" name="title" value={formData.title} onChange={handleChange} />
        </label>
        <label>
          Author:
          <input type="text" name="author" value={formData.author} onChange={handleChange} />
        </label>
        <label>
          Publication Date:
          <input type="text" name="publicationDate" value={formData.publicationDate} onChange={handleChange} />
        </label>
        <button type="submit">Add Book</button>
      </form>
      <div>
        <h2>Books</h2>
        <ul>
          {books.map(book => (
            <li key={book.id}>
              <div>Title: {book.title}</div>
              <div>Author: {book.author}</div>
              <div>Publication Date: {book.publicationDate}</div>
              <button onClick={() => handleDelete(book.id)}>Delete</button>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default BookManagement;