Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Calling FetchAPI and Axios
import React, { Component } from "react";
import axios from "axios";
import "./App.css";
import { recipes } from "./tempList";
import { AUTH_KEY } from "./config";
import RecipeList from "./components/RecipeList";
import RecipeDetails from "./components/RecipeDetails";
class App extends Component {
state = {
recipes: [],
url: `https://www.food2fork.com/api/search?key=${AUTH_KEY}`
};
// async getRecipes() {
// try {
// const data = await fetch(this.state.url);
// const jsonData = await data.json();
// this.setState({
// recipes: jsonData.recipes
// });
// } catch (error) {
// console.error("Error" + error);
// }
// }
// componentDidMount() {
// this.getRecipes();
// }
UNSAFE_componentWillMount() {
axios.get(this.state.url).then(res => {
this.setState({
recipes: res.data.recipes
});
});
}
render() {
console.log(this.state.recipes);
return (
<div>
<RecipeList />
<RecipeDetails />
</div>
);
}
}
export default App;
import React, { Component } from "react";
import "./App.css";
import { recipes } from "./tempList";
import RecipeList from "./components/RecipeList";
import RecipeDetails from "./components/RecipeDetails";
class App extends Component {
state = {
recipes: [],
url:
"https://www.food2fork.com/api/search?key=9186ec2e319b9863f415bbe068173d13"
};
async getRecipes() {
try {
const data = await fetch(this.state.url);
const jsonData = await data.json();
this.setState({
recipes: jsonData.recipes
});
} catch (error) {
console.error("Error" + error);
}
}
componentDidMount() {
this.getRecipes();
}
render() {
console.log(this.state.recipes);
return (
<div>
<RecipeList />
<RecipeDetails />
</div>
);
}
}
export default App;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.