I am using createContext to send the State to the rest of the components. Because the app is small, I decided to put the Context and functions in the same file. I am using the free version of cocktailDB API, but axios won't get it. It says that it can't find the resource. I want to call the API only once.
ContextCategories.js
import React, { createContext, useState, useEffect } from 'react';
import axios from 'axios';
//Creating the CONTEXT
export const ContextCategories = createContext(); //Reference to the context
//Creating the PROVIDER
const CategoriesProvider = (props) => {
//Creating the STATE of the CONTEXT
const [categories, setCategories] = useState([]);
//Calling the API
useEffect(()=>{
const cocktailCategories = () =>{
const URL = "www.thecocktaildb.com/api/json/v1/1/list.php?c=list";
const myCategories = axios.get(URL);
console.log(myCategories);
}
cocktailCategories();
},[]);
return(
<ContextCategories.Provider
value={{
}}
>
{props.children}
</ContextCategories.Provider>
);
};
export default CategoriesProvider;
CodePudding user response:
I believe you may need the http:// at the beginning of your url. Hope that helps. If you get a chance please take a look and upvote the following OnClick fires for another buttons click event