Creating a Simple Form Using React
Tags: beginners, react
Published: 2020-05-09 17:14:32

Let us create a simple form using React. This is going to be a follow along and would be best if you work alongside the tutorial.


By now you should have set up your project using the create-react-app.

You can check out this article [link](https://dev.to/amarachukwu/setting-up-your-react-project-on-windows-5f9o) to do that.

On our app.js insert the following code.

```javascript
import React from 'react';
import Form from './Form';
import './App.css';


class App extends Components{
  render(){
    return(
      <Form />
    );
  };
}

export default App;
```
Now, let's go ahead and create the Form Component, which we've already added to the app.js.
This is where the bulk of our form is going to be created.

```javascript
import React from 'react';
import Form from './Form';
import './App.css';

class Form extends React.Component {
  state ={
    firstName: '',
    lastName: '',
    username: '',
    email: '',
    password: ''
  }

  render(){
    return(
      <form>
        <input placeholder ='firstname' value = {this.state.firstName} />
      </form>
    );
  }
}


export default App;
```
Stat here is going to hold all the values (your first name, last name, username, email and password)

Then you go ahead and render the form.
The input value would be anything you want it to be and in this case, we want our first input to have the value of first name.

The input we have above can only accept values passed into it from the state. The user cannot be able to enter an input on the form.

So, we'll add an `onChange` function which we'll pass a parameter of whatever the user types.

Our input would be 
```javascript
        <input 
        placeholder ='firstname' 
        value = {this.state.firstName}
        onChange={e => this.setState({firstName:e.target.value})}
        />
```

Do this for the next 4 fields and we'll have 
```javascript
      <form>
          <input 
        placeholder ='firstname' 
        value = {this.state.firstName}
        onChange={e => this.setState({firstName:e.target.value})}
        />
          <input 
        placeholder ='lastname' 
        value = {this.state.lastName}
        onChange={e => this.setState({lastName:e.target.value})}
        />
          <input 
        placeholder ='username' 
        value = {this.state.username}
        onChange={e => this.setState({username:e.target.value})}
        />
          <input 
        placeholder ='email' 
        value = {this.state.email}
        onChange={e => this.setState({email:e.target.value})}
        />
          <input 
        placeholder ='email' 
        value = {this.state.email}
        onChange={e => this.setState({email:e.target.value})}
        />
      </form>
```

But there's a better way to do the onChange action, to make the code a bit DRY (Do not repeat yourself).
We can go ahead and write our own `change` function.

```javascript
  change =e => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };
```

Our input now looks like this
```javascript
          <input 
    name = 'firstName'
        placeholder ='firstname' 
        value = {this.state.firstName}
        onChange={e => this.change(e)}
        />
```
The `change` function grabs what the name value is in the input and passes it down to the `onChange` function.

Do this across all other inputs. 

Let's create a button now for submitting the fields.
```javascript
<button onClick={() => this.onSubmit()}>
Submit
</button>
```
The button uses the `onClick` method to listen for a click event after which it executes the function `onSubmit`

Let's write our onSubmit function
```javascript
  onSubmit = () => { 
      console.log(this.state);
  }
```

Here, we are only logging our state to the console (our values)
But also notice how the values also displayed in the address bar.

You can prevent that by passing the event parameter e into your functions and the button.

Then, set the parameter e to prevent default `e.preventDefault();` to your code.

Now, your inputs can conveniently display on the console.


You can view the full work here: [github](https://github.com/emmanuellar/react-register)