I am new to Reactjs currently I'm working on antdesign table I want to fetch a data from external API and insert data into table but it give me error I also also google it but nothing found please help me below is my code

import React, { useState, useEffect } from "react";
import Axios from "axios";
import { Table } from "antd";

function App() {
  const [state, setstate] = useState({});
  const [loading, setloading] = useState(true);
  useEffect(() => {
    getData();
  }, []);

  const getData = async () => {
    const res = await Axios.get(
      ""
    );

    setstate(res.data);
    setloading(false);
  };
  const data = loading
    ? "wait"
    : state.map(row => ({ Name: row.name, Email: row.email }));

  const columns = [
    {
      title: "Name",
      dataIndex: "Name",
      width: 150
    },
    {
      title: "Email",
      dataIndex: "Email",
      width: 150
    }
  ];

  return (
    <div>
      <Table
        columns={columns}
        dataSource={data}
        pagination={{ pageSize: 50 }}
        scroll={{ y: 240 }}
      />
      ,
    </div>
  );
}

export default App;

And here is codesandbox.io

I am new to Reactjs currently I'm working on antdesign table I want to fetch a data from external API and insert data into table but it give me error I also also google it but nothing found please help me below is my code

import React, { useState, useEffect } from "react";
import Axios from "axios";
import { Table } from "antd";

function App() {
  const [state, setstate] = useState({});
  const [loading, setloading] = useState(true);
  useEffect(() => {
    getData();
  }, []);

  const getData = async () => {
    const res = await Axios.get(
      "https://jsonplaceholder.typicode./ments"
    );

    setstate(res.data);
    setloading(false);
  };
  const data = loading
    ? "wait"
    : state.map(row => ({ Name: row.name, Email: row.email }));

  const columns = [
    {
      title: "Name",
      dataIndex: "Name",
      width: 150
    },
    {
      title: "Email",
      dataIndex: "Email",
      width: 150
    }
  ];

  return (
    <div>
      <Table
        columns={columns}
        dataSource={data}
        pagination={{ pageSize: 50 }}
        scroll={{ y: 240 }}
      />
      ,
    </div>
  );
}

export default App;

And here is codesandbox.io

• javascript
• reactjs

Share Improve this question Follow edited Mar 25, 2020 at 8:13 ROOT 11.6k55 gold badges3434 silver badges4848 bronze badges asked Mar 25, 2020 at 8:08 Hanzlah TariqHanzlah Tariq 5122 silver badges88 bronze badges 2

• Can you please include the error as well? Thanks! – norbitrial Commented Mar 25, 2020 at 8:14
• Data is 'wait' while it is loading. replace 'wait' with [] and it should work – DTul Commented Mar 25, 2020 at 8:17

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

in addition to the accepted answer, note in the following snippet the conditional rendering also how to use state, setState functions,I suggest to check the documentation on how to use react hooks:

here is a better implementation of your code:

import React, { useState, useEffect } from "react";
import Axios from "axios";
import { Table } from "antd";

function App() {
  const [state, setstate] = useState([]);
  const [loading, setloading] = useState(true);
  useEffect(() => {
    getData();
  }, []);

  const getData = async () => {
    await Axios.get("https://jsonplaceholder.typicode./ments").then(
      res => {
        setloading(false);
        setstate(
          res.data.map(row => ({
            Name: row.name,
            Email: row.email,
            id: row.id
          }))
        );
      }
    );
  };

  const columns = [
    {
      title: "Name",
      dataIndex: "Name",
      width: 150
    },
    {
      title: "Email",
      dataIndex: "Email",
      width: 150
    }
  ];

  return (
    <div>
      {loading ? (
        "Loading"
      ) : (
        <Table
          columns={columns}
          dataSource={state}
          pagination={{ pageSize: 50 }}
          scroll={{ y: 240 }}
        />
      )}
    </div>
  );
}

export default App;

codesandbox

the <Table /> ponents data prop might be a array like data structure you sending it an string, when you assigning "wait" to data props and you might get an error for that, instead you can use something like below:

const data = loading
    ? [] 
    : state.map(row => ({ Name: row.name, Email: row.email }));

in which we assign an empty array to data while it is being in loading state, also you should store your api data in your state, not as a variable inside of your function, what you are doing there is an obvious bad practice!