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

21 Sep, 2021
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 './table';  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:
Blogathon-2021
React-Questions
Blogathon
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Create a Table With Multiple Foreign Keys in SQL?
How to Import JSON Data into SQL Server?
Stratified Sampling in Pandas
SQL Query to Convert Datetime to Date
How to Install Tkinter in Windows?
How to fetch data from an API in ReactJS ?
How to redirect to another page in ReactJS ?
How to pass data from child component to its parent in ReactJS ?
How to pass data from one component to other component in ReactJS ?
ReactJS Functional Components