Cannot load table in React.js

Question

I was experimenting with fragments and was trying to dynamically load data onto a table. I am not getting any error but the table isn't displaying on the webpage. Please find my attached code snippets below. There are 3 files called App.js, FragmentDemo.js (I've declared the table and the header here) and FragmentChild.js (The table data will be sent from an array of data)

    //**App.js**

    import logo from './logo.svg';
    import './App.css';

    import MountLife from './components/MountLifeCycle'
    import Fragment from './components/Fragments/FragmentDemo'


    function App() {
    return (<div className="App">
             <Fragment />
            </div>)
  
    }

    export default App;

    //**FragmentDemo.js**

    import React from 'react'
    import FragChild from './FragChild'

    function FragmentDemo() {
    return (
        <div>
            <table>
                <tr>
                  <th>id</th>
                  <th>Name</th>
                  <th>Company</th>
                </tr>
                <FragChild />
            </table>
        </div>
    )
    }

    export default FragmentDemo

    //**FragChild.js**

    import React from 'react'

    function FragChild() {
    const list = [{
        id: 1,
        name: "P1",
        company:"Google"
    },
    {
        id: 2,
        name: "P2",
        company:"Microsoft"
    },
    {
        id: 3,
        name: "P3",
        company:"Uber"
    }
    ]

    const paramList = list.map( elem => (
        <tr key={elem.id}>
         <td>{list.id}</td>
         <td>{list.name}</td>
         <td>{list.company}</td>
        </tr>))
        
    return (
        <React.Fragment>
            {paramList}
        </React.Fragment>
    )
    }

    export default FragChild

jnpdx · Accepted Answer · 2021-03-11 04:02:28Z

3

In your paramList, you're referring to list.id, list.name, etc -- what you really want is elem.id, elem.name, etc:


const paramList = list.map( elem => (
        <tr key={elem.id}>
         <td>{elem.id}</td>
         <td>{elem.name}</td>
         <td>{elem.company}</td>
        </tr>))

As an unrelated issue, you will get a warning that you should also have a tbody HTML element -- you should add that to your markup as well (but having it or not will not affect whether the table is rendered or not)

answered Mar 11, 2021 at 4:02

jnpdx

53.3k7 gold badges91 silver badges123 bronze badges

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

2 Comments

redhatter Over a year ago

Dang it! I feel so stupid right now. Thanks a lot for the help!

jnpdx Over a year ago

If this solved your issue, you can click the green check mark to accept the answer.

codemonkey · Accepted Answer · 2021-03-11 04:03:13Z

1

Change your paramList to be a function:

const paramList = () => list.map( elem => (
    <tr key={elem.id}>
     <td>{elem.id}</td>
     <td>{elem.name}</td>
     <td>{elem.company}</td>
    </tr>))

Then just call it:

<React.Fragment>
     {paramList()}
</React.Fragment>

edited Mar 11, 2021 at 4:03

answered Mar 11, 2021 at 3:56

codemonkey

7,9655 gold badges28 silver badges46 bronze badges

4 Comments

jnpdx Over a year ago

It does not have to be a function

codemonkey Over a year ago

@jnpdx Couldn't agree more.

redhatter Over a year ago

Wow! Thats so much more elegant. will definitely make a note of that! Thanks for the help

codemonkey Over a year ago

@SamarthShetty Glad to help.

Collectives™ on Stack Overflow

Cannot load table in React.js

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related