Rendering json as a table in react js

Question

I'm trying to render json data in a table using useState in react but it's not appearing for some reason.

This is the react file:

import React, { useState } from 'react'
import "../styling/Classes.css"
import data from "./mock-data.json";

function Classes() {
    const [inputFields, setInputFields] = useState([
        { classCode: '', studentAmount: '' }
    ])
    
    const [students, setStudents] = useState(data)

    return (
        <div className="classes-container">
            <div className="classes-wrapper">
                <h2>Classes</h2>
                <table>
                    <thead>
                        <tr>
                            <th>First name</th>
                            <th>Last name</th>
                            <th>Class code</th>
                            <th>Birth date</th>
                            <th>Mobile number</th>
                        </tr>
                    </thead>
                    <tbody>
                    {students.map((student) => {
                        <tr>
                            <td>{student.FirstName}</td>
                            <td>{student.LastName}</td>
                            <td>{student.ClassCode}</td>
                            <td>{student.BirthDate}</td>
                            <td>{student.MobileNumber}</td>
                        </tr>
                        })}
                       
                    </tbody>
                </table>
            </div>
        </div>
    )
}

export default Classes;

This is the json file:

[
    {
        "id": 0,
        "FirstName": "Saif",
        "LastName": "Khadraoui",
        "ClassCode": "13-MA1",
        "BirthDate": "17/12/2003",
        "MobileNumber": "78464329843"
    },

    {
        "id": 1,
        "FirstName": "test1",
        "LastName": "Khadraoui",
        "ClassCode": "13-MA1",
        "BirthDate": "17/12/2003",
        "MobileNumber": "83427912"
    },

    {
        "id": 2,
        "FirstName": "test2",
        "LastName": "Khadraoui",
        "ClassCode": "13-MA1",
        "BirthDate": "17/12/2003",
        "MobileNumber": "316283216821"
    }
]

what do you see if you do console.log(data); console.log(students); just above the return statement ? — Antonio Pantano
– Antonio Pantano, Commented Oct 28, 2021 at 21:15
try printing data and see if first print undefined and later the currentData, it should be a sync problem — Gabriel Pérez Carballo
– Gabriel Pérez Carballo, Commented Oct 28, 2021 at 21:18
How do you import the json file and declare the data variable? — Michel
– Michel, Commented Oct 28, 2021 at 21:29

Fernando Bravo Diaz · Accepted Answer · 2021-10-28 21:31:12Z

1

The problem lies here:

   {students.map((student) => {
       // You are not returning the part that should render
       <tr>
           <td>{student.FirstName}</td>
           <td>{student.LastName}</td>
           <td>{student.ClassCode}</td>
           <td>{student.BirthDate}</td>
           <td>{student.MobileNumber}</td>
       </tr>
    })}

   {students.map((student) => {
       // Just return this part and it should render. 
       // Also don't forget to add a key for each tr
       return (
           <tr key={`${student.FirstName}-${student.LastName}`} >
               <td>{student.FirstName}</td>
               <td>{student.LastName}</td>
               <td>{student.ClassCode}</td>
               <td>{student.BirthDate}</td>
               <td>{student.MobileNumber}</td>
           </tr>
       );
    })}

answered Oct 28, 2021 at 21:31

Fernando Bravo Diaz

5791 gold badge4 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Michel · Accepted Answer · 2021-10-28 21:50:58Z

0

Since you are returning JSX only you can replace your curly brackets with parenthesis. Also, make sure to use a unique id for the iteration key, otherwise you are guaranteed to encounter sneaky bugs. You have ids in your data so let's use that:

{students.map(student => (
    <tr key={student.id}>
        <td>{student.FirstName}</td>
        <td>{student.LastName}</td>
        <td>{student.ClassCode}</td>
        <td>{student.BirthDate}</td>
        <td>{student.MobileNumber}</td>
    </tr>
)}

answered Oct 28, 2021 at 21:50

Michel

28.6k6 gold badges67 silver badges72 bronze badges

Collectives™ on Stack Overflow

Rendering json as a table in react js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related