create a component for Axios that can be used in different places with different values

Question

How can I create a component for Axios that I can use in different places with different values ​​?? I got stuck, what should I do? This is what I have achieved so far

thank you for Helping

import axios from "axios";


const Axios = (props) => {
    const [posttitle, postbody] = useState([]);
    const [postuserid, postid] = useState([]);
    const fetchData = () => {
        const { postbodyapi } = props.postbodyapi;
        const postuseridapi = "https://nba-players.herokuapp.com/players/james/lebron";
        const getbody = axios.get(postbodyapi);
        const getuseid = axios.get(postuseridapi);
        axios.all([getbody, getuseid]).then(axios.spread((...allData) => {
            const databody = allData[0].data.first_name;
            const datauseid = allData[1].config.url;
            postbody(databody);
            postid(datauseid);
        }))
    }

    useEffect(() => {
        fetchData()
    }, [])

    return (
        <div className="App">
            {posttitle}


            <img src={postuserid} alt="asd"/>
        </div>
    );
}
export default Axios;

Answer 1

You should create a custom hook.

Create a hook called for example useAxios and hold only the fetching method inside of it, and the return state from that hook should be just data. you can make it so it takes params like "URL, data, method", or make a few smaller hooks like useAxiosGet, useAxiosPost.

If you make a few smaller it will be easier to read and change something if needed.

Here is how I did it, an example of one specific Axios custom hook, use this for example to see how to build it.

useGetCar.js // custom axsios hook

import axios from 'axios';

const useGetCar = async (url, id) => {
    const result = await axios.post(url, {id: id});
    return result.data[0];
}

export default useGetCar


car.js // page component that displays data

import useGetCar from "@hooks/useGetCar";
let car_id = 1; // some that i send to api

// this function here is not exact from my code, 
//but I just wanted to provide you an example.

// I didn't include my original code because it is 
//from next.js app and I don't want to confuse u with that

async function getData() {
  let car = await useGetCar(`http://localhost/get_car.php`, car_id);
  return car;
}

Hope you understood what I'm saying, and I did not confuse you. Feel free to ask anything if you don't understand something clearly. Happy coding.