Name:-Aditya Raj Roll No: 11212714 Sec on: A1
PRACTICAL – 4
Aim:- Create a JSON file which has student details:- registra on, name,
department and display the same in react component using the map func on.
Theory:
JSON :- JSON (JavaScript Object Notation) is a lightweight data format that is
commonly used in React JS projects. JSON is widely used for data storage, data
transmission, and configuration in web applications.
Map() :-
The map() in React function is used to iterate through arrays and manipulates
or modify data elements.
The map() in React method creates a new array by calling the provided
function on each element of the calling array.
The map() in React function does not modify the original array.
The map() in React method is most commonly used to render a list of data into
the DOM.
File Structure:
JSON data:
[Link]
[
{
"Registration_No": 11212714,
"Name": "Aditya Raj",
"Department": "computer science"
},
{
"Registration_No": 11212506,
"Name": "Snehit Garg",
"Department": "computer science"
1
MMEC
Name:-Aditya Raj Roll No: 11212714 Sec on: A1
},
{
"Registration_No": 11212535,
"Name": "Rinki",
"Department": "computer science"
},
{
"Registration_No": 11212529,
"Name": "Gautam",
"Department": "computer science"
},
{
"Registration_No": 11212781,
"Name": "Babarangi",
"Department": "computer science"
},
{
"Registration_No": 11212782,
"Name": "Ankit Raj",
"Department": "computer science"
},
{
"Registration_No": 11212505,
"Name": "Punit",
"Department": "computer science"
},
{
"Registration_No": 11212507,
"Name": "Akshat",
"Department": "computer science"
},
{
"Registration_No": 11212520,
"Name": "Vansh",
"Department": "computer science"
},
{
"Registration_No": 11212715,
"Name": "Arun",
"Department": "computer science"
}
2
MMEC
Name:-Aditya Raj Roll No: 11212714 Sec on: A1
]
Code:
[Link]
import React from 'react'
import student from './[Link]'
function Jsondata() {
const displaydata=[Link]((info)=>{
return (
<tr>
<td>{info.registration_no}</td>
<td>{[Link]}</td>
<td>{[Link]}</td>
</tr>
);
})
return (
<>
<table>
<thead>
<tr>
<th>Registration_No</th>
<th>Name</th>
<th>Department</th>
</tr>
</thead>
<tbody>
{displaydata}
</tbody>
</table>
</>
)
}
export default Jsondata;
3
MMEC
Name:-Aditya Raj Roll No: 11212714 Sec on: A1
[Link]
import React from 'react';
import ReactDOM from 'react-dom/client';
import './[Link]';
import Jsondata from './Jsondata';
const root = [Link]([Link]('root'));
[Link](
<Jsondata/>
);
OUTPUT:-
4
MMEC
