 |
| Display JSON Data using map Function with React Component | IndianTechnoEra |
Aim:
Create a JSON file, which has student details such a register number, name, department, and display the same in react component using the map function.
Component 1: JSON Data Part
| Student.json |
|---|
[ {"Name": "Sam","Branch": "CSE","Roll": "101", "RegNo":"8989898989"}, {"Name": "Sid","Branch": "ECE","Roll": "102", "RegNo":"7979797979"}, {"Name": "Edward","Branch": "CSE","Roll": "103", "RegNo":"8787878787"}, {"Name": "Andrew","Branch": "Bio","Roll": "104", "RegNo":"9797979797"} ] |
Component 2: JSON Data Manage Part
| JsonDataDisplay.js |
|---|
import JsonData from './Student.json' import './JsonDataDisplay.css' function JsonDataDisplay () { const DisplayData = JsonData.map(data => { return ( <tr> <td> {data.Name} </td> <td> {data.Branch} </td> <td> {data.Roll} </td> <td> +91 {data.RegNo} </td> </tr> ) }) return ( <div> <table className='table'> <thead> <tr> <th>Name</th> <th>Branch</th> <th>Roll</th> <th>Register No.</th> </tr> </thead> <tbody> {DisplayData} </tbody> </table> </div> ) } export default JsonDataDisplay; |
Component 3: CSS Part
| JsonDataDisplay.css |
|---|
table{width:350px;font-size:25px;align-items:center} th{border:2px solid #000;color:#04ff96;width:100px} td{border-bottom:2px dotted #898989} |
Component 4: Index Part
| index.js |
|---|
import ReactDOM from 'react-dom/client' import React from 'react' import JsonDataDisplay from './JsonDataDisplay' const root = ReactDOM.createRoot(document.getElementById('root')) root.render( <> <React.StrictMode> <JsonDataDisplay /> </React.StrictMode> </> ) |
Output:
