React Add Form Data in HTML Table with Bootstrap Tutorial

This comprehensive guide will teach you how to insert form data on submit into an HTML table in React, and also how to show form data in React Table.

To dynamically store the form data in React table, we will use the Bootstrap CSS library, functional component and React hook.

The useState Hook in React permits to set of the state variables in functional components. It will help us add a new row to an HTML table using a form component in React.

HTML Tables are used to display a large set of data in a compact and user-friendly way. On the other hand, Forms are ideally used to gather information from the site visitors.

In this step-by-step tutorial, you will learn to master the skill of working with Form and Table together. To build the Table component in React, we will use the Bootstrap 5 library. We’ll use the Bootstrap Table component to create the Table in React functional component.

Similarly, we will use the Bootstrap Form component to create the form component in React. Getting the form data and inserting the form data in the table component requires a hook to manage the state.

For managing the state, we will use the useState hook. Let’s find out how to save the form data in the table row in React.

How to Send Form Input Data to Table in React Js

  • Step 1: Build New React App
  • Step 2: Setting Up Bootstrap
  • Step 3: Build Form Component
  • Step 4: Display Data in Table
  • Step 5: Save and Show Form Data in Table
  • Step 5: Update Global Component
  • Step 6: Run Development Server

Build New React App

Most of you must have created the React app. However, if not. Go ahead and execute the following command to install a new app.

npx create-react-app react_demo

Enter into the application folder.

cd react_demo

Setting Up Bootstrap

Bootstrap is primarily used to create faster UI components. You have to run the given command to install bootstrap package in your project.

npm install bootstrap

Next, open the App.js file, the import the bootstrap CSS path.

import React from "react";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "./App.css";

function App() {
  return (
    <div className="container mt-5">

    </div>
  );
}

export default App;

Build Form Component

Now comes the main task, that is to create the features/UserForm.js file. Inside the file, add the code as it is.

We are getting form values through props, these are the values acquired from user.

function UserForm({ onChange, formData, onSubmit }) {
  return (
    <div className="row mb-5">
      <div className="w-50 mx-auto">
        <div className="mb-2">
          <input
            type="text"
            onChange={onChange}
            value={formData.name}
            name="name"
            className="form-control"
            placeholder="Name"
          />
        </div>
        <div className="mb-2">
          <input
            type="email"
            onChange={onChange}
            value={formData.email}
            name="email"
            className="form-control"
            placeholder="Email"
          />
        </div>
        <div className="mb-2">
          <input
            type="text"
            onChange={onChange}
            value={formData.contact}
            name="contact"
            className="form-control"
            placeholder="Contact"
          />
        </div>

        <div className="d-grid">
          <input
            type="submit"
            onClick={onSubmit}
            className="btn btn-outline-danger"
          />
        </div>
      </div>
    </div>
  );
}

export default UserForm;

Display Data in Table

Now that app is ready, make sure to head towards the src folder.

Here you have to create the features folder, then create the functional component, make sure to name it UserTable.js.

Then, copy the given code and paste it into the file to create the basic function component.

This will be the centralized location for saving the data retrieved from the form component.

function UserTable({ userData }) {
  return (
    <div className="row mb-5">
      <div className="w-50 mx-auto">
        <table className="table table-striped">
          <thead>
            <tr>
              <th>#ID</th>
              <th>Name</th>
              <th>Email</th>
              <th>Contact</th>
            </tr>
          </thead>
          <tbody>
            {userData.map((item, i) => {
              return (
                <tr key={i}>
                  <td>{i + 1}</td>
                  <td>{item.name}</td>
                  <td>{item.email}</td>
                  <td>{item.contact}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

export default UserTable;

Save and Show Form Data in Table

In this section, we have to create the User.js component file, and, here we import the Form and Table components for.

Hence add the following code into the newly created file.

import React, { useState, Fragment } from "react";
import UserForm from "./UserForm";
import UserTable from "./UserTable";

function User() {
  const [userData, setUserData] = useState([]);
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    contact: "",
  });

  const onChange = (e) => {
    const formVal = (data) => ({
      ...data,
      [e.target.name]: e.target.value,
    });
    setFormData(formVal);
  };

  const onSubmit = (e) => {
    e.preventDefault();
    const isValEmpty = !Object.values(formData).every(
      (response) => response === ""
    );
    if (isValEmpty) {
      const valObj = (data) => [...data, formData];
      setUserData(valObj);
      const emptyValues = { name: "", email: "", contact: "" };
      setFormData(emptyValues);
    }
  };
  return (
    <Fragment>
      <div className="container mt-5">
        <UserForm onChange={onChange} formData={formData} onSubmit={onSubmit} />

        <UserTable userData={userData} />
      </div>
    </Fragment>
  );
}

export default User;

Update Global Component

You have successfully developed the component, now it’s time to register that component in the src/App.js global component file.

import React from "react";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import User from "./features/User";

function App() {
  return (
    <div className="container mt-5">
      <h2 className="text-center">
        React Store and Display Form Data in Table Example
      </h2>
      <User />
    </div>
  );
}

export default App;

Run Development Server

Copy and paste the following command on the console and press enter to run the app development server.

npm start

You can now open the app with the given url.

http://localhost:3000

React Add Form Data in HTML Table with Bootstrap Tutorial

Conclusion

In this article, we have figured out: how to create a form with bootstrap in React and how to pass the form data to the table component as a new row in React js application using the function component and React hook.