Unable to render Table in Reactjs

Question

I am trying to hit an api(sample response) which gives list of objects and render it in a table in react. Following is my code. I am getting error as data is not defined

Here is the code when I hardcoded data, the table got rendered perfectly

import React, { useEffect, useState } from "react";

function renderTableData() {
    return data.map((student, index) => {
        const { config, text, source_link, tab_type } = student //destructuring
        return (
            <tr key={config}>
                <td>{config}</td>
                <td>{text}</td>
                <td>{source_link}</td>
                <td>{tab_type}</td>
            </tr>
        )
    })
}

const useFetch = (url) => {
    const [data, setData] = useState('');
    const [loading, setLoading] = useState(true);
    useEffect(async () => {
        const response = await fetch(url, {
            method: 'GET',
        })
        const data = await response.json()
        console.log(data)
        setData(data)
        setLoading(false)
    }, []);
    return { data, loading };
}

export default function CreateTestcaseStep2() {
    const { data, loading } = useFetch(ENPOINT_URL_GOES_HERE)

    return (
        <div>
            <h1 id='title'>React Dynamic Table</h1>
            <table id='students'>
                <tbody>
                    {renderTableData()}
                </tbody>
            </table>
        </div>
    );
}

Please suggest where I am doing wrong as renderTableData function is not able get the data object.

Maybe fetch(..).then(response => response.json()).then(json => {...}) — JB_DELR
– JB_DELR, Commented Dec 20, 2020 at 17:54
Also try to initialise your default data as empty array like const [data, setData] = useState({data:[]}); this way you can return ( {data.lenght > 0 && .... — JB_DELR
– JB_DELR, Commented Dec 20, 2020 at 17:57
@ToddSkelton I tried that as well {renderTableData({data})} but it's not working throwing error data.map is not a function — Mahesh
– Mahesh, Commented Dec 20, 2020 at 18:13

gmoniava · Accepted Answer · 2020-12-20 18:17:38Z

1

renderTableData is defined outside your functional component and you refer to data variable within it, I suppose it doesn't know which data variable to refer to? I am surprised you didn't get an error about this.

Try passing the data variable as parameter to the function.

answered Dec 20, 2020 at 18:17

gmoniava

28.9k9 gold badges61 silver badges103 bronze badges

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

11 Comments

gmoniava Over a year ago

@Mahesh Please console.log data first to see what you are passing

gmoniava Over a year ago

@Mahesh this is before you set it to something. Use initial value of [] instead of '' in useState.

Mahesh Over a year ago

just replaced [] in place of '' and the data got rendered perfectly. Thank you so much @giorgim

gmoniava Over a year ago

@Mahesh map is a function which should be called on array, not string

gmoniava Over a year ago

@Mahesh It is better to not ignore it, here is some reading about it: reactjs.org/docs/lists-and-keys.html

|

Fiodorov Andrei · Accepted Answer · 2020-12-20 18:16:54Z

I'm refactor you example.

Do not use useEffect asyc.

useEffect(() => {
    axios.get(url).then((response) => {
      setData(response);
      setLoading(false);
    });
}, [url]);

If you want to make table body with a function, need to pass data using parameters.

const renderTableData = (data) => {
                      // ^^^^  Pass data using function parameters, 
                      // this function it's possible to use in another table with the same data
  return data?.map((student) => {
    const { id, name, username, email } = student;
    return (
      <tr key={id}>
        <td>{name}</td>
        <td>{username}</td>
        <td>{email}</td>
      </tr>
    );
  });
};

To render table body with function pass state

<tbody>{renderTableData(data)}</tbody>
                     // ^^^^ Passing state to render table body

See live demo, pass data into function using params:

Collectives™ on Stack Overflow

Unable to render Table in Reactjs

2 Answers 2

11 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related