Reusable React Custom Form Component

Introduction

In this challenge you will be developing a reusable custom form aka submit form in React with functional component in which you can add as much input fields and buttons as you want by sending them as props. You can use that SINGLE component in your future projects too to have login form, registration form or a data creation/updation form for any CRUD functionality.

This form does not add input fields dynamically but it has capability to create multiple fields by sending them as props. So, if you have big project which can have multiple forms, you can create ONE SINGLE CUSTOM FORM COMPONENT and call that wherever you want.

Skills Graph

Custom Form

To get started, open the editor. You can see the following files from your editor.

├── public
├── src
│   ├── components
│   │   └── CustomForm
│   │       ├── CustomForm.css
│   │       └── CustomForm.js
│   ├── App.js
│   ├── index.css
│   └── index.js
├── package-lock.json
└── package.json

Requirements

• To install the project dependencies, use the following command:

  npm i

• Please complete this challenge in the App.js file.

• Use the useRef hook to create two ref objects, usernameRef and passwordRef. These refs will be used to access the values of the input fields.

• handleLogin function: This function is called when the "Login" button is clicked. It logs the values of the username and password input fields to the console and displays an alert with the entered username and password.

• handleRegister function: This function is called when the "Register" button is clicked. It logs the values of the username and password input fields to the console.

Example

Once you have completed the code, run it with the following command:

npm start

The finished result is as follows:

Summary

Congratulations! You have completed the Custom Form. You can practice more challenge in LabEx to improve your skills.