React Hook "useParams" is called in function "fetchMentors" that is neither a React function component nor a custom React Hook function

user_851097 0
Viewed 1427

I have the following code

import React, { useState, useEffect } from 'react';
import Axios from "axios";
import {NavLink, useParams} from "react-router-dom";
import Spinner from '../../Spinner';

function MentorList() {
    const [categoriesResult, setCategoriesResult] = useState([]);
    const [mentorsResult, setMentorsResult] = useState([]);
    const [categoriesToId, setCategoriesToId] = useState({});
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState('');

    useEffect(() => {
        const fetchCategories = () => {
            Axios.get("https://localhost:4000/categories", {}).then((response) => {
                if (response.data.status === "ok") {
                    setCategoriesResult(Object.keys(response.data.result));
                    setCategoriesToId(response.data.result);
                    setLoading(false);
                } else {
                    setError(response.data.error);
                    setLoading(false);
                }
            }).catch(err => {
                console.dir(err);
                setError("There was an error signing you in. Please try again later.");
                setLoading(false);
            });
        };

        const fetchMentors = () => {
            const { categoryId } = useParams();
            if (categoryId) {
                console.dir('test');
                Axios.get("https://localhost:4000/view-by-category/" + categoryId, {}).then((response) => {
                    if (response.data.status === "ok") {
                        setMentorsResult(Object.keys(response.data.result));
                        setLoading(false);
                    } else {
                        setError(response.data.error);
                        setLoading(false);
                    }
                }).catch(err => {
                    console.dir(err);
                    setError("There was an error with the request. Please try again later.");
                    setLoading(false);
                });
            }
        };

        fetchCategories();
        fetchMentors();
    }, []);

    if (loading) {
        return <Spinner />;
    }

    if (mentorsResult && categoriesResult) {
        var mentors = mentorsResult.map(mentor => {
            return <div className="row">
                <p className="mentor-profile-name">{mentor.name}</p>
                <p className="mentor-profile-bio">{mentor.shortBio}</p>
                <NavLink to={`/mentor/${mentor.id}`} exact>View Profile</NavLink>
            </div>
        })
        var categories = categoriesResult.forEach(item => {
            return <div className="row"><NavLink to={`/mentors/${item.id}`} exact>{item.name}</NavLink></div>
        });

        return <div className="container">
            <div className="col-3">
                {categories}
            </div>
            <div className="col-9">
                {mentors}
            </div>
        </div>
    } else {
        return <div></div>;
    }
};
export default MentorList;

when I run it I get the following error

src/components/Mentor/MentorList.js Line 32:36: React Hook "useParams" is called in function "fetchMentors" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use" react-hooks/rules-of-hooks

Can someone please help?

reactjs
2 Answers

import React, { useState, useEffect } from 'react';
import Axios from "axios";
import {NavLink, useParams} from "react-router-dom";
import Spinner from '../../Spinner';

function MentorList() {
    const [categoriesResult, setCategoriesResult] = useState([]);
    const [mentorsResult, setMentorsResult] = useState([]);
    const [categoriesToId, setCategoriesToId] = useState({});
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState('');
    const { categoryId } = useParams();

    useEffect(() => {
        const fetchCategories = () => {
            Axios.get("https://localhost:4000/categories", {}).then((response) => {
                if (response.data.status === "ok") {
                    setCategoriesResult(Object.keys(response.data.result));
                    setCategoriesToId(response.data.result);
                    setLoading(false);
                } else {
                    setError(response.data.error);
                    setLoading(false);
                }
            }).catch(err => {
                console.dir(err);
                setError("There was an error signing you in. Please try again later.");
                setLoading(false);
            });
        };

        fetchCategories();
    }, []);
    
    useEffect(() => {

        const fetchMentors = () => {
            console.dir('test');
            Axios.get("https://localhost:4000/view-by-category/" + categoryId, {}).then((response) => {
                if (response.data.status === "ok") {
                    setMentorsResult(Object.keys(response.data.result));
                    setLoading(false);
                } else {
                    setError(response.data.error);
                    setLoading(false);
                }
            }).catch(err => {
                console.dir(err);
                setError("There was an error with the request. Please try again later.");
                setLoading(false);
            });
        };
        
        if (categoryId) {
            fetchMentors();
        }
    }, [categoryId]);

    if (loading) {
        return <Spinner />;
    }

    if (mentorsResult && categoriesResult) {
        var mentors = mentorsResult.map(mentor => {
            return <div className="row">
                <p className="mentor-profile-name">{mentor.name}</p>
                <p className="mentor-profile-bio">{mentor.shortBio}</p>
                <NavLink to={`/mentor/${mentor.id}`} exact>View Profile</NavLink>
            </div>
        })
        var categories = categoriesResult.forEach(item => {
            return <div className="row"><NavLink to={`/mentors/${item.id}`} exact>{item.name}</NavLink></div>
        });

        return <div className="container">
            <div className="col-3">
                {categories}
            </div>
            <div className="col-9">
                {mentors}
            </div>
        </div>
    } else {
        return <div></div>;
    }
};
export default MentorList;

React hooks can't be called inside useEffect or any functions, so you should use that directly inside the component.

user_118125630

Just want to add to this question. This problem can also occur if you did not capitalize the functional component name wherein you used the useParams() hook.

In my case, I just capitalized the name of the rfc and the error was gone.

user_97659270
Related