Creating a Simple Form Using React

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 to do that.

On our app.js insert the following code.

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.

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

        <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

      <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.

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

Our input now looks like this

          <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.

<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

  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