Build a Simple React Login Form using Event Handlers and React Hook

Hello, everyone!

I think many people face difficulties at the beginning of learning React. In my perspective, one has to try to build simple projects along with the concepts, so that we can understand clearly.

So, here I am to help you out by building a simple login form using React and boosting your React knowledge

This is another super duper simple project. In this project, we are building a simple login form. Are you excited?

Let's get started.

Prerequisite Concepts:

1. onClick, onChange, and onSubmit -> Event Handlers

2. useState() -> React Hook

3. Object destructuring.

You should know the above concepts clearly before starting this project.

Steps:

• Create a React app called “login-form” with the following command:

  npx create-react-app login-form
  

• Start running your server with the following command:

  npm run start
  

• Create two variables data(to store), setData(to update) with the React hook useState().

  const [data,setData] = useState({
       username:"",
       password:""
  });
  

• Here, while initializing, we set the username and password to empty strings.

• Create a form that contains two inputs, 1. Username and 2. password

  <form>
  
  <input type="text" name="username" value={username} />
  <br />
  <input type="password" name="password" value={password} />
  <br />
  
  </form>
  

• Destructure the variables username and password from data and store it in username and password variables as shown below:

  const {username,password} = data;
  

• Create a submit button.

  <input type="submit" name="submit" />
  

• Declare onChange Event.

  const changeHandler = e => {
  
  setData({...data,[e.target.name]:[e.target.value]});
  
  }
  

• (…data) indicates every data.

• [e.target.name]:[e.target.value] indicates a particular username(name) = that particular password(value).

• Add onChange handlers in the input form as shown below.

  <form onSubmit={submitHandler}>
  
  <input type="text" name="username" value={username}
  onChange={changeHandler}/><br />
  
  <input type="password" name="password" value={password}
  onChange={changeHandler}/><br />
  
  <input type="submit" name="submit" />
  
  </form>
  

• Now add onSubmit handler

  const submitHandler = e => {
  
  e.preventDefault();
  
  console.log(data);
  
  }
  

Here e.preventDefault() indicates every time when the submit handler hits, it goes to default state.

i.e., it sets username and password to empty fields.

• Add onSubmit into the form as shown below:

  <form onSubmit={submitHandler}>
  

So, whenever we click on submit button it triggers submit handler and it displays the data in the console.

Finally, the entire code will look like this:

This is a very simple login form using React with the useState hook and onChange, onSubmit as Event Handlers.

You can also try the same for a sign-up form as well.

Thanks for reading! I hope you all have gained some knowledge by reading this article.

I will come back with more simple React projects like this in the upcoming days. So, keep following me.

If you want to encourage me, you can click on the below link and buy me a coffee. It helps me to write more creative articles. Your support means a lot! Thank you.

Buy me a coffee ☕️

Keep smiling!

Have a nice day!