Consider adding an error boundary to your tree to customize error handling behavior in Functional Component

I have been working on an admin-Ui project. where I require to display data in a table format and do some pagination. Firstly I have used use effect to fetch some data from an API on page load.

function App() {
    const [data, setData] = useState();
    const [filteredData, setFilteredData] = useState([]);
    const [page, setPage] = useState(1);

    useEffect(() => {
        const getData = async () => {
            const res = await axios.get(config.endpoint);
            setData(res.data);
            setFilteredData(res.data);
        };
        getData();
    }, []);

    //Handling Search
    const handleSearch = (text) => {
        setFilteredData(performSearch(text, data));
    };

    //paging;
    const end = page * config.pageSize;
    const start = end - config.pageSize;

    const filterData = data.slice(start, end);
    //change Page Function
    const handlePage = (num) => setPage(num);

    return (
        <div className="App">
            <Search handleSearch={handleSearch} />
            <UserTable data={filterData} />
            {/* <Pages handlePaginate={handlePage} dataLength={data.length} /> */}
        </div>
    );
}

export default App;

All imports are done properly. While running this code the application shows an array that data is undefined. and produces an error

Consider adding an error boundary to your tree to customize error handling behavior.

After referring to the docs it stated that it works only for class components but I am using react functional components. Any idea to solve this issue?

I understood that the “data” usage in pagination is causing errors because the data is undefined before the API call and setData(). Need Help.

Answer

Before the data is fetched from the newtwork, the value of state variable data is undefined, because you declared it so:

const [data, setData] = useState();

This is same as :

const [data, setData] = useState(undefined);

I guess the real problem is here:

const filterData = data.slice(start, end);

.slice does not exist on undefined. You can do two things:

1. Define (Initialize) data as an empty array:

const [data, setData] = useState([]);

2. Or, you can use Optional Chaining