Tạo một component ReservationForm trong ReactJS

import React, { useState } from 'react';
import './ReservationForm.css';

const ReservationForm = () => {
  // State để lưu trữ thông tin đặt bàn
  const [reservationInfo, setReservationInfo] = useState({
    name: '',
    phoneNumber: '',
    numberOfPeople: '',
    reservationTime: '',
  });

  // Hàm xử lý thay đổi thông tin đặt bàn
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setReservationInfo({ ...reservationInfo, [name]: value });
  };

  // Hàm xử lý nộp biểu mẫu
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Thông tin đặt bàn:', reservationInfo);
    // Thêm logic xử lý thông tin đặt bàn ở đây (ví dụ: gửi đến API, lưu vào state của ứng dụng, ...)
  };

  return (
    <div className="reservation-form-container">
      <h2>Reservation Form</h2>
      <form onSubmit={handleSubmit}>
        <div className="form-group">
          <label htmlFor="name">Name:</label>
          <input
            type="text"
            id="name"
            name="name"
            value={reservationInfo.name}
            onChange={handleInputChange}
            required
          />
        </div>
        <div className="form-group">
          <label htmlFor="phoneNumber">Phone Number:</label>
          <input
            type="text"
            id="phoneNumber"
            name="phoneNumber"
            value={reservationInfo.phoneNumber}
            onChange={handleInputChange}
            required
          />
        </div>
        <div className="form-group">
          <label htmlFor="numberOfPeople">Number of People:</label>
          <input
            type="number"
            id="numberOfPeople"
            name="numberOfPeople"
            value={reservationInfo.numberOfPeople}
            onChange={handleInputChange}
            required
          />
        </div>
        <div className="form-group">
          <label htmlFor="reservationTime">Reservation Time:</label>
          <input
            type="datetime-local"
            id="reservationTime"
            name="reservationTime"
            value={reservationInfo.reservationTime}
            onChange={handleInputChange}
            required
          />
        </div>
        <button type="submit">Submit Reservation</button>
      </form>
    </div>
  );
};

export default ReservationForm;

/* ReservationForm.css */

.reservation-form-container {
  max-width: 400px;
  margin: auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h2 {
  text-align: center;
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  font-weight: bold;
}

input[type="text"],
input[type="number"],
input[type="datetime-local"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  background-color: #3498db;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
}

button:hover {
  background-color: #2980b9;
}

import React from 'react';
import ReservationForm from './ReservationForm';
import './ReservationForm.css'; // Import CSS file

const App = () => {
  return (
    <div className="App">
      <h1>Reservation Form App</h1>
      <ReservationForm />
    </div>
  );
};

export default App;