Problem Statement: Dynamic Form Implementation in React
Objective: Design and implement a dynamic form using React. The form fields must be
generated based on a backend API response and adjusted dynamically based on user
selections (e.g., selecting different options from a dropdown changes the form structure).
Requirements and Steps to Implement:
1. API Integration for Dynamic Form:
○ Create a form structure that depends on a backend API response, which
changes based on user interactions. (You can hardcode the API responses here,
no need to write a backend code)
Given below are few examples of user interactions:
Example 1: User Information Form
If the user selects "User Information" from a dropdown, the backend might respond with specific
fields like:
"fields": [
{ "name": "firstName", "type": "text", "label": "First Name",
"required": true },
{ "name": "lastName", "type": "text", "label": "Last Name",
"required": true },
{ "name": "age", "type": "number", "label": "Age", "required":
false }
Example 2: Address Form
If the user selects "Address Information," the backend could respond with the following fields:
{
"fields": [
{ "name": "street", "type": "text", "label": "Street", "required":
true },
{ "name": "city", "type": "text", "label": "City", "required":
true },
{ "name": "state", "type": "dropdown", "label": "State",
"options": ["California", "Texas", "New York"], "required": true },
{ "name": "zipCode", "type": "text", "label": "Zip Code",
"required": false }
Example 3: Payment Information Form
If the user selects "Payment Information," the backend might return:
"fields": [
{ "name": "cardNumber", "type": "text", "label": "Card Number",
"required": true },
{ "name": "expiryDate", "type": "date", "label": "Expiry Date",
"required": true },
{ "name": "cvv", "type": "password", "label": "CVV", "required":
true },
{ "name": "cardholderName", "type": "text", "label": "Cardholder
Name", "required": true }
}
2. Rendering Dynamic Fields:
○ Render form fields based on the API response, displaying labels, types, and
required status. Update fields dynamically based on dropdown selection.
3. Responsive UI:
○ Your form should have a responsive header and footer that adjust for both
desktop and mobile devices.
○ Ensure that the overall form layout is responsive.
4. Form Validation:
○ Validate dynamic fields as per the backend response, ensuring required fields are
filled and data types are correct.
○ If a required form field is not filled in, display an appropriate error message
below the field to guide the user.
5. User Feedback & Interactions:
○ On successful form submission, display a "Sign-up Successful" or a similar
success message.
○ For each valid user action, provide relevant feedback messages to enhance the
user experience.
○ Example User Actions:
■ When a file upload is successful, display: "File uploaded successfully!".
■ After the user deletes an entry from the table, show: "Entry deleted
successfully."
■ When the user edits an entry and saves the changes, display: "Changes
saved successfully."
6. Tabular Display of Form Data:
○ After the user submits the form, display all submitted data in a tabular format.
○ Each row should have Edit and Delete buttons to allow users to modify or
remove their submitted data.
7. Progress Indicator:
○ Include a progress bar that indicates how much of the form the user has
completed. For example, the progress bar should fill as the user completes each
required field.
○ Alternatively, include an animation to visually indicate a successful form
submission.
8. Error Handling:
○ Handle errors gracefully for failed API requests, displaying a user-friendly error
message if the form structure could not be loaded.
9. Code Quality:
○ Write clean, readable, and maintainable code with proper comments explaining
the logic and structure.
Note:
● Just write the frontend code only. The backend (API) is not needed and won’t be
evaluated.
