Create simple login form in React
Tags: react, webdev, javascript, beginners
Published: 2021-03-09 18:30:45

###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](https://dirask.com/posts/1yNl3D)

Final effect:![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n28zev2el8ga3yxw2xsd.png)

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:
```jsx
import React from 'react';
import ReactDOM from 'react-dom';

const appStyle = {
	height: '250px',
  	display: 'flex'
};

const formStyle = {
    margin: 'auto',
    padding: '10px',
    border: '1px solid #c9c9c9',
    borderRadius: '5px',
    background: '#f5f5f5',
    width: '220px',
  	display: 'block'
};

const labelStyle = {
    margin: '10px 0 5px 0',
    fontFamily: 'Arial, Helvetica, sans-serif',
    fontSize: '15px',
};

const inputStyle = {
    margin: '5px 0 10px 0',
    padding: '5px', 
    border: '1px solid #bfbfbf',
    borderRadius: '3px',
    boxSizing: 'border-box',
    width: '100%'
};

const submitStyle = {
    margin: '10px 0 0 0',
    padding: '7px 10px',
    border: '1px solid #efffff',
    borderRadius: '3px',
    background: '#3085d6',
    width: '100%', 
    fontSize: '15px',
    color: 'white',
    display: 'block'
};

const Field = React.forwardRef(({label, type}, ref) => {
    return (
      <div>
        <label style={labelStyle} >{label}</label>
        <input ref={ref} type={type} style={inputStyle} />
      </div>
    );
});

const Form = ({onSubmit}) => {
    const usernameRef = React.useRef();
    const passwordRef = React.useRef();
    const handleSubmit = e => {
        e.preventDefault();
        const data = {
            username: usernameRef.current.value,
            password: passwordRef.current.value
        };
        onSubmit(data);
    };
    return (
      <form style={formStyle} onSubmit={handleSubmit} >
        <Field ref={usernameRef} label="Username:" type="text" />
        <Field ref={passwordRef} label="Password:" type="password" />
        <div>
          <button style={submitStyle} type="submit">Submit</button>
        </div>
      </form>
    );
};

// Usage example:

const App = () => {
    const handleSubmit = data => {
        const json = JSON.stringify(data, null, 4);
        console.clear();
        console.log(json);
    };
    return (
      <div style={appStyle}>
        <Form onSubmit={handleSubmit} />
      </div>
    );
};

export default App;
```
You can run this example [here](https://dirask.com/posts/1yNl3D)

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](https://dirask.com/questions)

You can also join our [facebook group](https://www.facebook.com/groups/125343696143974) where we share  coding tips and tricks with others! 🔥