React js beginner course | Login functionality in react.js| API call in react.js

Let’s create a page where the users of our app can login with their credentials. When we created our User Pool we asked it to allow a user to sign in and sign up with their email as their username. We’ll be touching on this further when we create the signup form. So let’s start by creating the basic form that’ll take the user’s email (as their username) and password. We are introducing a couple of new concepts in this. Right at the top of our component, we are using the useState hook to store what the user enters in the form. The useState hook just gives you the current value of the variable you want to store in the state and a function to set the new value. If you are transitioning from Class components to using React Hooks, we’ve added a chapter to help you understand how Hooks work. We then connect the state to our two fields in the form using the setEmail and setPassword functions to store what the user types in — e.target.value. Once we set the new state, our component gets re-rendered. The variables email and password now have the new values. We are setting the form controls to show the value of our two state variables email and password. In React, this pattern of displaying the current form value as a state variable and setting the new one when a user types something, is called a Controlled Component. We are setting the autoFocus flag for our email field, so that when our form loads, it sets focus to this field. We also link up our submit button with our state by using a validate function called validateForm. This simply checks if our fields are non-empty, but can easily do something more complicated. Finally, we trigger our callback handleSubmit when the form is submitted. For now we are simply suppressing the browser’s default behavior on submit but we’ll do more here later.

Видео React js beginner course | Login functionality in react.js| API call in react.js автора Реакт и Redux: совместное использование