Uncaught RangeError: Maximum call stack size exceeded in React js while calling custom hooks

I am trying to send a success or error value from my Edit component and setting that value to that value to useAlert hooks. And then calling the useAlert hooks from the List component and trying to render the message above the List according to the success or error value that was returned by the useAlert hooks. but I am getting error while calling the hooks from the List component.

My Custom Hooks is below: useAlert.js:

import React from "react";

function useAlert(props){

    const [alert, setAlert] = useAlert("");

    useEffect(()=>{
        setAlert(props.alert);
    },[]);
    return alert;
}
export default useAlert;

From below Component, i am calling the custom hooks: List.js:

import React,{useState, useEffect} from "react";
import axios from "axios";
import Moment from 'react-moment';
import {Link} from "react-router-dom";
import Pagination from "react-js-pagination";
import useAlert from "../hooks/useAlert.js";
import Error from "../alerts/Error.js";
import Success from "../alerts/Success.js";

function List(){

    const [alert, setAlert] = useState("");
    
    let alo = useAlert(alert);

    const [categories, setCategories] = useState([]);
    const [activePage, setActivePage] = useState(1);
    const [itemsCountPerPage, setItemsCountPerPage] = useState(0);
    const [totalItemsCount, setTotalItemsCount] = useState(0);

    useEffect(()=>{
        axios.get('http://127.0.0.1:8000/categories')
          .then(function (response) {
            console.log(response);
            setActivePage(response.data.current_page);
            setCategories(response.data.data);
            setItemsCountPerPage(response.data.per_page);
            setTotalItemsCount(response.data.total);
          })
          .catch(function (error) {
            console.log(error);
          });
    },[]);

    function handleClick(id){

        axios.delete('http://127.0.0.1:8000/delete/'+id)
          .then(function (response) {
            console.log(response);
            setActivePage(response.data.current_page);
            setCategories(response.data.data);
            setItemsCountPerPage(response.data.per_page);
            setTotalItemsCount(response.data.total);
          })
          .catch(function (error) {
            console.log(error);
          });
    }
    function handlePageChange(pageNumber) {
        console.log(`active page is ${pageNumber}`);
        
        axios.get('http://127.0.0.1:8000/categories?page='+pageNumber)
          .then(function (response) {
            console.log(response);
            setActivePage(response.data.current_page);
            setCategories(response.data.data);
            setItemsCountPerPage(response.data.per_page);
            setTotalItemsCount(response.data.total);
          })
          .catch(function (error) {
            console.log(error);
          });
      }

    return(
            <>
            
            {alo==="success" ? <Success msg="Category Updated successfully." />:null}

            <table className="table" style={{marginTop: "20px"}}>
              <thead>
                <tr>
                  <th scope="col">SL.</th>
                  <th scope="col">Name</th>
                  <th scope="col">Created_at</th>
                  <th scope="col">Updated_at</th>
                  <th scope="col">Edit</th>
                  <th scope="col">Delete</th>
                </tr>
              </thead>
              <tbody>
              {
                categories.map((category, index)=>{

                    return(
                            <tr key={index}>
                              <th scope="row">{index+1}</th>
                              <td>{category.name}</td>
                              <td><Moment format="D MMM YYYY">{category.created_at}</Moment></td>
                              <td><Moment format="D MMM YYYY">{category.updated_at}</Moment></td>
                              <td><Link to={`/edit/${category.id}`} className="btn btn-primary">Edit</Link></td>
                              <td><button onClick={()=>handleClick(category.id)} type="button" className="btn btn-danger">Delete</button></td>
                            </tr>
                        )
                })
              }
               
              </tbody>
            </table>

                <div className="d-flex justify-content-center">
                    <Pagination
                      activePage={activePage}
                      itemsCountPerPage={itemsCountPerPage}
                      totalItemsCount={totalItemsCount}
                      pageRangeDisplayed={5}
                      onChange={handlePageChange}
                      itemClass="page-item"
                      linkClass="page-link"
                    />
                </div>
            </>
        );
}

export default List;

I have tried many way but i am getting this below error-->

Uncaught RangeError: Maximum call stack size exceeded
    at useAlert (app.js:2130)
    at useAlert (app.js:2131)
    at useAlert (app.js:2131)
    at useAlert (app.js:2131)
    at useAlert (app.js:2131)
    at useAlert (app.js:2131)
    at useAlert (app.js:2131)
    at useAlert (app.js:2131)
    at useAlert (app.js:2131)
    at useAlert (app.js:2131)

Please any expert check the code and let me know what is wrong here ? and how can i solve it?



Read more here: https://stackoverflow.com/questions/66335048/uncaught-rangeerror-maximum-call-stack-size-exceeded-in-react-js-while-calling

Content Attribution

This content was originally published by smk pobon at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: