React js call api on page load

Question

I am learning React js, I am using below data code to bind the value receiving from API. I am using MUI Datatable to bind the data everything is working good. My issue is when I run react js application, its render the empty mui datatable table first then load the data. Is there anyway I can call api first onpageload when the home page load.

function GetEmployeeList() {
  const [empList, setEmpList] = useState([]);
  const getEmployeeList = () => {
    axios.get(configData.SERVER_URL + "/api/getEmployeeList").then((res) => {
      const Employee = res.data;
      setEmpList(Employee);
    });
  };
  useEffect(() => {
    const interval = setInterval(() => getEmployeeList(), 10000);
    return () => {
      clearInterval(interval);
    };
  }, []);
  return EmployeeListTable(empList);
}

function EmployeeListTable(value) {
  if (
    typeof value == "undefined" ||
    value == null ||
    value.length == null ||
    value.length < 0
  ) {
    return <div></div>;
  }
  const columns = [
   { label: "Employee ID", name: "id" },
   { label: "EmpoyeeName", name: "name" },
   { label: "Address", name: "address" },
   { label: "Number", name: "number" },
  
  ];

  const data = value.map((item) => {
    return [
      item.id
      item.name,
      item.address,
      item.number,
    ];
  });

  const options = {
    caseSensitive: true,
    responsive: "standard",
    selectableRows: "none",
  };

  return (
    <MUIDataTable
      title={"Employee"}
      data={data}
      columns={columns}
      options={options}
    />
  );
}

Delice · Accepted Answer · 2021-05-24 18:20:05Z

6

If you only want to render your UI when there is some data then you could do:

return (
    data.length > 0 && 
      <MUIDataTable
        title={"Employee"}
        data={data}
        columns={columns}
        options={options}
      />
  );

EDIT:

const HomeComponent = () => {
  const [data, setData] = React.useState([])

  useEffect(() => {
    axios
      .get(configData.SERVER_URL + "/api/getEmployeeList")
      .then((res) => {
        setData(res.data)
      })
  })

  return (
    {data.length > 0 && 
      <EmployeeComponent data={data} />
    }
  )
}

edited May 24, 2021 at 18:20

answered May 24, 2021 at 11:22

Delice

84110 silver badges21 bronze badges

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

3 Comments

nagaraj Over a year ago

it means the user has to wait until the data is bound otherwise it will empty this is fine, Let's consider 2 pages one is the home page & the other is the Employee page. when I run react js, it loads the home page first So there any way I call ````Employee``` page API method when the home page loaded

Delice Over a year ago

If I understood correctly - you want to load the data in homepage before Employee page is even rendered, correct? if so - you should have an useEffect inside your Home component that fetches the data and later on gives the data as props to Employee component.

Jonathan Orrego Over a year ago

Keep in mind that if you are using Strict Mode, then the useEffect will run twice (still if you use empty deps [ ])

Md. Saifur Rahman · Accepted Answer · 2024-08-20 11:10:31Z

0

useEffect(() => {
        getFilterList()
    }, [])


const getFilterList = async () => {
        const response = await getCall(HANDSET_USER_FILTER_DATA, null, props?.user?.access_token)
        if (response?.code === 200) {
            setFormData((prev) => ({
                ...prev,
                filter: { ...prev.filter, list: { ...prev.filter?.list, ...response?.data } }
            }))
        }
    }

answered Aug 20, 2024 at 11:10

Md. Saifur Rahman

4303 silver badges7 bronze badges

Collectives™ on Stack Overflow

React js call api on page load

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related