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}
    />
  );
}

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}
    />
  );
}

• javascript
• node.js
• reactjs
• react-hooks

2 Answers 2

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} />
    }
  )
}

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 } }
            }))
        }
    }