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:
