My custom hook throughing an error of can't resolve useaxiosHook

JavaScript
1 
import { useState, useEffect } from 'react';
import axios from 'axios';

axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';

/**
 fixed :
  - no need to JSON.stringify to then immediatly do a JSON.parse
  - don't use export defaults, because default imports are hard to search for
  - axios already support generic request in one parameter, no need to call specialized ones
**/
export const useAxios = (axiosParams) => {
    const [response, setResponse] = useState(undefined);
    const [error, setError] = useState('');
    const [loading, setLoading] = useState(true);

    const fetchData = async(params) => {
        try {
            const result = await axios.request(params);
            setResponse(result.data);
        } catch (error) {
            setError(error);
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        fetchData(axiosParams);
    }, []); // execute once only

    return { response, error, loading };
};
export default useAxios;

import { useAxios } from 'useaxiosHook';

const Gallery = () => {

    const { response, loading, error } = useAxios({

        method: 'POST',

        url: '/posts',

        headers: { // no need to stringify

          accept: '*/*'

        },

        data: {  // no need to stringify

            userId: 1,

            id: 19392,

            title: 'title',

            body: 'Sample text',

        },

    });

    return (

        <div className='App'>

            <h1>Posts</h1>

            {loading ? (

                <p>loading...</p>

            ) : (

                <div>

                    {error && (

                        <div>

                            <p>{error.message}</p>

                        </div>

                    )}

                    <div> {

                      // no need to use another state to store data, response is sufficient

                      response && <p>{response.id}</p>

                    }

                    </div>

                </div>

            )}

        </div>

    );

};

export default Gallery;
2

First of all, why are you exporting that hook twice, as a named export and the default export?

Secondly:

import { useAxios } from 'useaxiosHook';

Where is this hook file relative to the file that is importing it? I expect to see some kind of path like:

import { useAxios } from '../../hooks/useaxiosHook';

or whatever.

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.