[FIXED] Why does my data not appear on the table?

Issue

I am given some school task, I am using React js and tailwindcss tools, I want to make a table that shows data.

I am using some sources I found on youtube, but not all the data was inserted into the table.

App.js code:

import React, {useState} from "react";
import "./App.css"; 
import data from  "./dataset.json";

const App = () => {
  const [contacts, setContacts] = useState(data);

    return ( 
    <div className="app-container">
        <table>
            <thead>
                <tr>
                    <th>NAMA</th>
                    <th>UMUR</th>
                    <th>TINGGI</th>
                    <th>BERAT BADAN</th>
                    <th>JENIS KELAMIN</th>
                    <th>TEKANAN SISTOLE</th>
                    <th>TEKANAN DIASTOLE</th>
                    <th>TINGKAT KOLESTEROL</th>
                    <th>TINGKAT GLUKOSA</th>
                    <th>PEROKOK AKTIF/TIDAK</th>
                    <th>ALKOHOLIK/TIDAK</th>
                    <th>AKTIVITAS FISIK</th>
                    <th>RIWAYAT PENYAKIT CARDIOVASCULAR</th>
                </tr>
            </thead>
            <tbody>
              {contacts.map((contacts)=> (
                <tr>
                  <td>{contacts.name}</td>
                  <td>{contacts.age}</td>
                  <td>{contacts.height}</td>
                  <td>{contacts.weight}</td>
                  <td>{contacts.gender}</td>
                  <td>{contacts.ap_hi}</td>
                  <td>{contacts.ap_lo}</td>
                  <td>{contacts.cholestrol}</td>
                  <td>{contacts.gluc}</td>
                  <td>{contacts.smoke}</td>
                  <td>{contacts.alco}</td>
                  <td>{contacts.active}</td>
                  <td>{contacts.cardio}</td>
                </tr>

              )
              
              
              )}
                
            </tbody>
        </table>
    </div>
    );
};

export default App;

This App.css :

.app-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 2rem;
}

table {
  border-collapse: collapse;
  width: 250%;
}

th,
td {
  border: 1px solid #ffffff;
  text-align: center;
  padding: 10px;
  font-size: 25px;
}

th {
  background-color: rgb(117, 201, 250);
}

td {
  background-color: rgb(205, 235, 253);
}

form {
  display: flex;
  gap: 10px;
}

form td:last-child {
  display: flex;
  justify-content: space-evenly;
}

form * {
  font-size: 25px;
}

and this my dataset.json :

[
    {
        "_id": "633664fd355fcafc3b1282cc",
        "name": "yazid",
        "age": 18,
        "height": 165,
        "weight": 55,
        "gender": true,
        "ap_hi": 130,
        "ap_lo": 85,
        "cholestrol": 1,
        "gluc": 1,
        "smoke": true,
        "alco": false,
        "active": true,
        "cardio": false,
        "__v": 0
    },
    {
        "_id": "63369d1d355fcafc3b1282da",
        "name": "ryan",
        "age": 18,
        "height": 165,
        "weight": 55,
        "gender": true,
        "ap_hi": 130,
        "ap_lo": 85,
        "cholestrol": 1,
        "gluc": 1,
        "smoke": true,
        "alco": false,
        "active": true,
        "cardio": false,
        "__v": 0
    }
]

and here are few images of the UI

Table1 Table 2 Table 3

I don't know why, but the data in "gender", "smoke", "alco", "active" and "cardio" won't show on the table but the data on"name" which is a string its showing up

so I made changes to the data as follows

"smoke": "true",
"alco": "false",
"active": "true",
"cardio": "false",

but it still won't show any change.

if I set "smoke" to true I want it to show as "true"

and I also want to make a change for gender if it is true it should show as "man" and if it is false it should show as "woman" which I was not able to do

Solution

Try this

          <td>{contacts.name}</td>
          <td>{contacts.age}</td>
          <td>{contacts.height}</td>
          <td>{contacts.weight}</td>
          <td>{contacts.gender ? "man" : "woman"}</td>
          <td>{contacts.ap_hi}</td>
          <td>{contacts.ap_lo}</td>
          <td>{contacts.cholestrol}</td>
          <td>{contacts.gluc}</td>
          <td>{contacts.smoke?.toString()}</td>
          <td>{contacts.alco?.toString()}</td>
          <td>{contacts.active?.toString()}</td>
          <td>{contacts.cardio?.toString()}</td>

Answered By - Simba
Answer Checked By - - Timothy Miller (ReactFix Admin)