-
Your task is to create a simple login form component in React.
-
The form should consist of two fields: one for
usernameand one forpassword. Each input should update itsvalueattribute on input change. -
The
onSubmithandler is passed through the props to the component and accepts two parameters:usernameandpassword(in that order). -
When the Submit button is clicked,
onSubmithandler should be called. Use a button click event handler for this purpose. -
The application uses React 16.13.1.
-
Requirements:
-
Create an
inputelement for theusernamefield. It should have itsidset tousername-inputandtypeattribute set totext. -
The
usernameinput should update itsvalueattribute on being changed with the entered username. -
Create an
inputelement for thepasswordfield. It should have itsidset topassword-inputandtypeattribute set topassword. -
The
passwordinput should update itsvalueattribute on being changed with the entered password. -
Create a Submit button with its
idset tologin-button. -
The Submit button should be disabled(
disabledattribute set totrue) until bothusernameandpasswordfields are filled. -
The
onSubmithandler should be called when the Submit button is clicked. -
The
onSubmithandler should be called withusernameandpasswordpassed as parameters.
-
-
The styling and layout of the components is not assessed. Place them within the main
divin the provided starting code. Wrapping inputs and the Submit button in theformelement is not needed. -
Make sure the login form component is a default export.
import React from "react";
// Use functional or class component based on your preference.
// Make it a default export.
export default function LoginForm({ onSubmit }) {
return (<div>
Place your components here
</div>);
}