So i a begginer and do some school task. Using react js and tailwindcss tools, i want to make a table that show data.

and using some source i find from youtube, not all the data was insert to the table.

ok first this the 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 the result :

enter image description here enter image description here enter image description here

idk why, but the data on "gender", "smoke", "alco", "active" and "cardio" won't show on the table but the data on"name" which is string it show up

so i make the data to strings by adding marks so it will be like

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

but it also wont show any change.

if it can i want like if the "smoke" is true i want to show it as "true" also

and i also want to make for the gender if it true it will show as "man" and if it false it shown "woman" which i haven't know how.

CodePudding user response：

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>

CodePudding user response：

Change name of individual contacts to contact, and you are not returning anything from map. also you should always include key for each member in react. If you want to return data for true and false as string, you need to or convert it to the string with .toString() function

{contacts.map((contact, index) => {
    return(
        <tr key={index}>
            <td>{contact.name}</td>
            <td>{contact.age}</td>
            <td>{contact.height}</td>
            <td>{contact.weight}</td>
            <td>{contact.gender}</td>
            <td>{contact.ap_hi}</td>
            <td>{contact.ap_lo}</td>
            <td>{contact.cholestrol}</td>
            <td>{contact.gluc}</td>
            <td>{contact.smoke.toSting()}</td>
            <td>{contact.alco.toSting()}</td>
            <td>{contact.active.toSting()}</td>
            <td>{contact.cardio.toSting()}</td>
        </tr>
    )
})}