Question 186871 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to display specific columns in html table using React

i have below code in App.js

I am getting 50 columns from the source, where as i want to display only 4 columns in a table.
when i approach below method, the UI is displaying blank rows than data.

can you help.

import { useEffect, useState } from "react";

const App = () => {

    //1 create useState
    const [employees, setEmployees] = useState([]);

    //2 call api
    useEffect(() => {
        fetch("api/employee/GetEmployees")
            .then(response => { return response.json() })
            .then(responseJson => {
                //console.log(responseJson)
                setEmployees(responseJson)
            })
    }, [])

    console.log(employees)
    //console.log(setEmployees)
    //console.log(useState([]))

    //3 create div and table
    return (
        <div className="container">
            <h1>PPMDs</h1>
            <div className="row">
                <div className="col-sm-12">
                    <table className="table table-striped">
                        <thead>
                            <tr>
                                <th>PPMD ID</th>
                                <th>PPMD Name</th>
                                <th>PPMD</th>
                                <th>Email Address</th>
                            </tr>
                        </thead>

                        <tbody>
                            {
                                employees.map((item) => (
                                    <tr key={item.PersonnelNumber}>
                                        <td>{item.PersonnelNumber}</td>
                                        <td>{item.FirstName}</td>
                                        <td>{item.Type}</td>
                                        <td>{item.EmailAddress}</td>
                                    </tr>
                                ))
                            }
                        </tbody>
                    </table>

                </div>

            </div>

        </div>
        
        )
}

export default App;
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    i found the solution for it. it is the camel case of the column names is casing the issue. also the way we represent the columns should be enclosed in double quotes. here is the updated body code.

                             <tbody>
                            {
                                employees.map((item) => (
                                    <tr key={item["personnelNumber"]}>
                                        <td>{item["personnelNumber"]}</td>
                                        <td>{item["firstName"] + ', ' + item["lasttName"]}</td>
                                        <td>{item["type"]}</td>
                                        <td>{item["emailAddress"]}</td>
                                    </tr>
                                ))
                            }
                        </tbody>

  2. 0

    Seems like nothing wrong with this code. I tried to reproduce it, passing a list of objects with the same values you try to retrieve and it returns me a table with a row per item.

    Despite this, however, i see that you are fetching your api like this:

    fetch("api/employee/GetEmployees")

    Did you config a proxy server like explained here? https://create-react-app.dev/docs/proxying-api-requests-in-development/

    Otherwise you are missing the first part of the url, in your GET request. I’m expecting something like this:

    fetch("http://localhost:PORT/api/employee/GetEmployees")
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search