IndianTechnoEra: Json Data Display with ReactJS | Indiantechnoera

 

Student.json

[

    {"Name": "Sam","Branch": "CSE","Roll": "101"},

    {"Name": "Sid","Branch": "ECE","Roll": "942"},

    {"Name": "Edward","Branch": "CSE","Roll": "102"},

    {"Name": "Andrew","Branch": "Bio","Roll": "214"}

]

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>

      </tr>

    )

  })

  return (

    <div>

      <table className='table'>

        <thead>

          <tr>

            <th>Name</th>

            <th>Branch</th>

            <th>Roll</th>

          </tr>

        </thead>

        <tbody>

            {DisplayData}

        </tbody>

      </table>

    </div>

  )

}

export default JsonDataDisplay;

JsonDataDisplay.css

table{ width: 250px;}

th{border: 2px solid black;background-color: rgb(18, 222, 151);color: white;}

td{border-bottom: 2px dotted rgb(137, 137, 137);}

index.js

import React from 'react'

import ReactDOM from 'react-dom/client'

import JsonDataDisplay from './JsonDataDisplay'

const root = ReactDOM.createRoot(document.getElementById('root'))

root.render(

  <>

    <JsonDataDisplay />

  </>

)

Output