Question 3

Design and develop a functional component called TechBugReportForm.

• Validate that all fields are filled before submission.
• Use conditional rendering to show inline error messages if any field is empty and display a submission success message otherwise.
• Apply external CSS to organize the form and highlight input errors.

The form should include the following fields:

• Bug Title (text)
• Description (textarea)
• Affected Module (dropdown: e.g., UI, API, Database, Network)

TechBugReportForm.jsx

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

function TechBugReportForm() {
  // States
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');
  const [module, setModule] = useState('');
  const [submitted, setSubmitted] = useState(false);
  // Using an Object for Error Handling
  const [errors, setErrors] = useState({});

  // Event Handlers
  function handleTitle(e) {
    setTitle(e.target.value);
  };
  function handleDescription(e) {
    setDescription(e.target.value);
  };
  function handleModule(e) {
    setModule(e.target.value);
  };
  function handleSubmit(e) {
    e.preventDefault();
    const newErrors = {};

    if (!title.trim()) 
	    newErrors.title = 'Bug title is required.';

	if (!description.trim()) 
	    newErrors.description = 'Description is required.';

	if (!module) 
		newErrors.module = 'Please select a module.';

    setErrors(newErrors);

    if (Object.keys(newErrors).length === 0) {
      setSubmitted(true);
    }
  };

  // Render success message
  if (submitted) {
    return (
      <div className="success-message">
        Bug report submitted successfully. Thank you!
      </div>
    );
  }

  return (
    <form className="bug-form" onSubmit={handleSubmit}>
      <h2>Report a Technical Bug</h2>

      <label>
        Bug Title:
        <input
          type="text"
          value={title}
          onChange={handleTitle}
          className={errors.title ? 'input-error' : ''}
        />
        {errors.title && <span className="error">{errors.title}</span>}
      </label>

      <label>
        Description:
        <textarea
          value={description}
          onChange={handleDescription}
          className={errors.description ? 'input-error' : ''}
        />
        {errors.description && <span className="error">{errors.description}</span>}
      </label>

      <label>
        Affected Module:
        <select
          value={module}
          onChange={handleModule}
          className={errors.module ? 'input-error' : ''}
        >
          <option value="">-- Select Module --</option>
          <option value="UI">UI</option>
          <option value="API">API</option>
          <option value="Database">Database</option>
          <option value="Network">Network</option>
        </select>
        {errors.module && <span className="error">{errors.module}</span>}
      </label>

      <button type="submit">Submit Bug</button>
    </form>
  );
};

export default TechBugReportForm;

TechBugReportForm.css

.bug-form {
  max-width: 500px;
  margin: 40px auto;
  padding: 20px;
  border: 2px solid #ddd;
  border-radius: 8px;
  background-color: #fefefe;
  font-family: Arial, sans-serif;
}

.bug-form h2 {
  text-align: center;
  margin-bottom: 20px;
}

.bug-form label {
  display: block;
  margin-bottom: 15px;
}

.bug-form input[type="text"],
.bug-form textarea,
.bug-form select {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  border: 1px solid #aaa;
  border-radius: 4px;
  box-sizing: border-box;
}

.bug-form textarea {
  resize: vertical;
  min-height: 80px;
}

.bug-form .input-error {
  border-color: red;
  background-color: #ffe6e6;
}

.bug-form .error {
  color: red;
  font-size: 0.9em;
  margin-top: 5px;
  display: block;
}

.bug-form button {
  width: 100%;
  padding: 10px;
  background-color: #007acc;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.bug-form button:hover {
  background-color: #005f99;
}

.success-message {
  text-align: center;
  font-size: 1.4em;
  padding: 40px;
  color: #28a745;
}