A
Anonymous

Room Creation Component - Copy this React, Tailwind Component to your project

Create-a-React-functional-component-called-RoomCreationComponent-that-allows-a-user-to-input-the-following-details-to-create-a-room:-Tenant's-Name-(required):-A-text-input-field-to-capture-the-tenant's-name.-Room-Rent-(required):-A-numeric-input-field-to-specify-the-monthly-rent-for-the-room.-Room-Initial-Electricity-Reading-(required):-A-numeric-input-field-to-capture-the-initial-electricity-meter-reading.-Tenant's-Phone-Number-(required):-A-text-input-field-to-capture-the-tenant's-phone-number,-validated-for-proper-phone-number-format.-Aadhaar-Card-Photo-(optional):-A-file-upload-or-photo-capture-option-to-upload-or-capture-the-Aadhaar-card-photo-using-the-device's-camera-or-file-picker.-The-form-should-include-the-following-features:-Input-validation-for-required-fields-(showing-errors-for-missing-or-invalid-data).-A-button-labeled-"Add-Room"-that-triggers-form-submission-and-outputs-the-entered-data.-If-the-Aadhaar-card-photo-is-not-provided,-the-app-should-still-allow-form-submission.-The-UI-should-be-styled-cleanly-using-React-Native’s-StyleSheet.-Use-state-management-(e.g.,-useState)-to-manage-form-inputs-and-their-validations.-For-photo-capture,-use-the-expo-image-picker-library-to-allow-the-user-to-select-or-capture-an-image.-Include-a-mock-submission-function-that-logs-the-input-data-to-the-console.-Return-error-messages-if-required-fields-are-missing.-Ensure-the-component-is-modular-and-reusable.

Prompt
Component Preview

About

RoomCreationComponent - Create rooms with tenant details, rent, electricity reading, and phone number. Built with React and Tailwind. View and copy code!

Share

Last updated 1 month ago