How to create a form in ReactJS

Hello Guys,

It’s my first blog in Software Engineering. Today I will discuss how we can create a form in react js.

Let’s Goooo…..

React uses forms to allow users to interact with the web page, just like in HTML.

function MyForm() {
  return (
    <form>
      <label>Enter your name:
        <input type="text" />
      </label>
    </form>
  )
}
ReactDOM.render(<MyForm />, document.getElementById('root'));

The example above will work as normal, the form will submit, and the page will refresh. But it’s not how we want it in React. So, we want to prevent this default behavior and let React control the form.

Now you will be thinking about what handling a form in React will look like. Handling forms is about how you handle the data when it changes the value or gets submitted. Normally In HTML, form data is usually handled by the DOM. But In React, form data is typically handled by the components. That is, when the data is handled by the components, all the data is stored in the component state. Changes can be controlled by adding event handlers in the onChange attribute.

We can use the useState Hook to keep track of each inputs value and provide a "single source of truth" for the entire application.

Here is a minimal code sample:

import { useState } from "react";
import ReactDOM from 'react-dom';

function MyForm() {
  const [name, setName] = useState("");

  return (
    <form>
      <label>Enter your name:
        <input
          type="text" 
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </label>
    </form>
  )
}

ReactDOM.render(<MyForm />, document.getElementById('root'));

Now you might be thinking that how can you handle the submitting part of the form. You can get this done by adding an event handler in the onSubmit attribute for the <form>

import { useState } from "react";
import ReactDOM from 'react-dom';

function MyForm() {
  const [name, setName] = useState("");

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`The name you entered was: ${name}`)
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>Enter your name:
        <input 
          type="text" 
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </label>
      <input type="submit" />
    </form>
  )
}

ReactDOM.render(<MyForm />, document.getElementById('root'));

Now let’s discuss how you can create multiple input fields in a form.

This can be done by controlling the values of more than one input field by adding an name attribute to each element.

Now to access the fields in the event handler use the event.target.name and event.target.value syntax. And to also update the state, use square brackets around the property name.

import { useState } from "react";
import ReactDOM from "react-dom";

function MyForm() {
  const [inputs, setInputs] = useState({});

  const handleChange = (event) => {
    const name = event.target.name;
    const value = event.target.value;
    setInputs(values => ({...values, [name]: value}))
  }

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(inputs);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>Enter your name:
      <input 
        type="text" 
        name="username" 
        value={inputs.username || ""} 
        onChange={handleChange}
      />
      </label>
      <label>Enter your age:
        <input 
          type="number" 
          name="age" 
          value={inputs.age || ""} 
          onChange={handleChange}
        />
        </label>
        <input type="submit" />
    </form>
  )
}

ReactDOM.render(<MyForm />, document.getElementById('root'));

Lastly, let’s discuss how we can create a select box, dropdown list in React.

A dropdown list, or a select box, in React, is also a bit different from HTML. In HTML, the selected value in the dropdown list was defined with the selected attribute.

<select>
  <option value="Ford">Ford</option>
  <option value="Volvo" selected>Volvo</option>
  <option value="Fiat">Fiat</option>
</select>

But in React the selected value is defined with a value attribute on the select tag.

Here is a Code Sample:

import { useState } from "react";
import ReactDOM from "react-dom";
function MyForm() {
  const [myCar, setMyCar] = useState("Volvo");
  const handleChange = (event) => {
    setMyCar(event.target.value)
  }
  return (
    <form>
      <select value={myCar} onChange={handleChange}>
        <option value="Ford">Ford</option>
        <option value="Volvo">Volvo</option>
        <option value="Fiat">Fiat</option>
      </select>
    </form>
  )
}
ReactDOM.render(<MyForm />, document.getElementById('root'));

Thanks, for the reading, I’m dammed sure, now you are able to gain some knowledge fro this article.

See you soon with a new article.

<h1>Happy Coding! </h1>