Create simple login form in React

Hello there! 👋😊
In this article, I would like to show you how to make a simple login form in React.

Before we start, I would highly recommend you to check out runnable example for the solution on our website:
Create simple login form in React

Final effect:

Simple login form in React.
Simple login form in React.

Below I will try to explain to you how to create such a form in a few steps.

The whole structure of the example consists of the Field component, which will serve as a reusable code ♻, and the Form, which puts it all together.

In our case, the style property was used for styling. 🎨

To get the values entered by the user in the inputs, I’ve used the useRef hook, with which we can easily obtain a handle to a DOM element and retrieve the current value.

Using these values, we build an object that we can then send to the server after handling onSubmit. 📤

To prevent the page reloading onSubmit event, we explicitly called preventDefault() method.

📝Note
By default
ref property is reserved by React, so we should use the forwardRef function.

Practical example:

You can run this example here

So that’s my version of the simple login form in React.

If you found this solution useful let me know in the comment section or just leave a reaction 💗🦄💾.
Thanks for reading and see you in the upcoming posts! 😊🔥🔜

Write to us! ✉

If you have any problem to solve or questions that no one can answer related to a React or JavaScript topic, or you’re looking for a mentoring write to us on dirask.com -> Questions

You can also join our facebook group where we share coding tips and tricks with others! 🔥

--

--

--

We share coding tips and tricks in React❤️ 💻 🙂. We help to solve React problems at http://dirask.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Handling multiscreen forms in React Native

How you can get started with React JS in 2020

MATLAB macOS shortcuts

Polkadot Hackathon: SubQuery Workshop [Video + Slides]

[🧙‍♂️ MajScript #01] The Triforce of the Array in Javascript.

Error— json — loglevel fatal-ended with exit code 1

Developer Jaathakam

How to add twitter emoji to your Angular app with Twemoji

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Dirask React

Dirask React

We share coding tips and tricks in React❤️ 💻 🙂. We help to solve React problems at http://dirask.com

More from Medium

Quiz App with React (Class components ) and Redux

Next Js Tutorial

Next Js

React: Components, Hooks and State

Updating React Router v5 to v6