How to pass data into table from a form using React Components

ReactJS is a front-end library used to build UI components. In this article, we will learn to pass data into a table from a form using React Components. This will be done using two React components named Table and form. We will enter data into a form, which will be displayed in the table on ‘submit’.

Creating React Application And Installing Module:

Step 1: Create a React application using the following command.

npx create-react-app 

Step 2: After creating your project folder(i.e. my-first-app), move to it by using the following command.

cd my-first-app

Project Structure: It will look like this. 

Step 3: Create a dummy JSON file; that initially contains the following one object and save it as data.json

[ {"id":1,"name":"Akshit","city":"Moradabad"} ]

Implementation: Now write down the following code in respective files.

table.jsx

import React, { useState } from 'react';

function StudentForm(props) {
  const [name, setName] = useState('');
  const [city, setCity] = useState('');

  const changeName = (event) => {
    setName(event.target.value);
  };

  const changeCity = (event) => {
    setCity(event.target.value);
  };

  const transferValue = (event) => {
    event.preventDefault();
    const val = {
      name,
      city,
    };
    props.func(val);
    clearState();
  };

  const clearState = () => {
    setName('');
    setCity('');
  };

  return (
    <div>
      <label>Name</label>
      <input type="text" value={name} onChange={changeName} />
      <label>City</label>
      <input type="text" value={city} onChange={changeCity} />
      <button onClick={transferValue}> Click Me</button>
    </div>
  );
}

export default StudentForm;

form.jsx

import React, { useState } from 'react';
import StudentForm from './form';
import jsonData from './data.json';

function TableData() {
  const [studentData, setStudentData] = useState(jsonData);

  const tableRows = studentData.map((info) => {
    return (
      <tr>
        <td>{info.id}</td>
        <td>{info.name}</td>
        <td>{info.city}</td>
      </tr>
    );
  });

  const addRows = (data) => {
    const totalStudents = studentData.length;
    data.id = totalStudents + 1;
    const updatedStudentData = [...studentData];
    updatedStudentData.push(data);
    setStudentData(updatedStudentData);
  };

  return (
    <div>
      <table className="table table-stripped">
        <thead>
          <tr>
            <th>Sr.NO</th>
            <th>Name</th>
            <th>City</th>
          </tr>
        </thead>
        <tbody>{tableRows}</tbody>
      </table>
      <StudentForm func={addRows} />
    </div>
  );
}

export default TableData;

App.js

import TableData from './form';

function App() {
  return (
    <div className="App">
      <h1>Hello Geeks!!!</h1>
      <TableData />
    </div>
  );
}

export default App;

Step to Run Application: Run the application using the following command from the root directory of the project.

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output: