DEV Community 👩‍💻👨‍💻

Amarachi Emmanuela Azubuike
Amarachi Emmanuela Azubuike

Posted on • Updated on

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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})}
        />
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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
    });
  };
Enter fullscreen mode Exit fullscreen mode

Our input now looks like this

          <input 
    name = 'firstName'
        placeholder ='firstname' 
        value = {this.state.firstName}
        onChange={e => this.change(e)}
        />
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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);
  }
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)

18 Useful Github Repositories Every Developer Should Bookmark

18 Useful GitHub repositories every developer should bookmark: everything from learning resources and roadmaps to best practices, system designs, and tools.