Tạo một component QuizForm trong ReactJS

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

const QuizForm = () => {
  // State để lưu trữ câu hỏi và các câu trả lời
  const [answers, setAnswers] = useState({
    question1: '',
    question2: '',
    question3: '',
  });

  // Hàm xử lý thay đổi câu trả lời
  const handleAnswerChange = (e) => {
    const { name, value } = e.target;
    setAnswers({ ...answers, [name]: value });
  };

  // Hàm xử lý nộp bài kiểm tra
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Kết quả của bài kiểm tra:', answers);
    // Thêm logic xử lý kết quả bài kiểm tra ở đây (ví dụ: gửi đến API, tính điểm, ...)
  };

  return (
    <div className="quiz-form-container">
      <h2>Quiz Form</h2>
      <form onSubmit={handleSubmit}>
        <div className="form-group">
          <label htmlFor="question1">Câu hỏi 1:</label>
          <input
            type="text"
            id="question1"
            name="question1"
            value={answers.question1}
            onChange={handleAnswerChange}
            required
          />
        </div>
        <div className="form-group">
          <label htmlFor="question2">Câu hỏi 2:</label>
          <input
            type="text"
            id="question2"
            name="question2"
            value={answers.question2}
            onChange={handleAnswerChange}
            required
          />
        </div>
        <div className="form-group">
          <label htmlFor="question3">Câu hỏi 3:</label>
          <input
            type="text"
            id="question3"
            name="question3"
            value={answers.question3}
            onChange={handleAnswerChange}
            required
          />
        </div>
        <button type="submit">Nộp bài kiểm tra</button>
      </form>
    </div>
  );
};

export default QuizForm;

/* QuizForm.css */

.quiz-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"] {
  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 QuizForm from './QuizForm';
import './QuizForm.css'; // Import CSS file

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

export default App;