Calling FetchAPI and Axios

reactaxiosadependecy.js

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;

reactfetchapi.js

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;