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:
