Untitled

import Axios from 'axios'
import React, { useState } from "react";
import { v4 as uuidv4 } from 'uuid'
import Recipe from "./Recipe";

const RecipeSearch = () => {
    const [query, setQuery] = useState("");
    const [recipes, setRecipes] = useState([]);

    const api_id = "c00557ab";
    const api_key = "ba5ed2cdcc4e64ff63a51f2cc935d8d4";

    const url = `https://api.edamam.com/search?q=${query}&app_id=${api_id}&app_key=${api_key}`;

    const getData = async () => {
        const result = await Axios.get(url);
        setRecipes(result.data.hits);
        console.log(result);
        setQuery("");
    };

    const onChanged = (e) => {
        setQuery(e.target.value);
    };

    const onSubmited = (e) => {
        e.preventDefault();
        getData();
    };
    return (
        <div>
            <div className="search-container">
                <form onSubmit={onSubmited}>
                    <input
                        type="text"
                        placeholder="Search.."
                        name="search"
                        autoComplete="off"
                        onChange={onChanged}
                        value={query}
                    />
                    <button type="submit" value="search">
                        <i className="fa fa-search"></i>
                    </button>
                </form>
            </div>
            <div className="recipes">
                {recipes !== [] &&
                    recipes.map((recipe) => <Recipe key={uuidv4()} props={recipe} />)}//////////////
            </div>
        </div>
    );
};

export default RecipeSearch;



import React from "react";
import { Link } from "react-router-dom";
import RecipeDetails from "./RecipeDetails";
import { v4 as uuidv4 } from 'uuid'

const Recipe = (props) => {
    const { label, image, url } = props.recipe;

    return (
        <div className="recipe">
            <h2>{label}</h2>
            <img src={image} alt={label} />
            <a href={url} target="_blank" rel="noopener noreferrer">URL</a>
            <Link key={uuidv4} to="/RecipeDetails" props={props.recipe}>//////////////////
                Show more
            </Link>

        </div>
    );
};

export default Recipe;





import React from "react";

const RecipeDetails = (props) => {
    const { label, image, url } = props.recipe;
    console.log(props)//////////////


    return (
        <div>
            <h1>{label}</h1>
            <div>{image}</div>
            <h1>{url}</h1>
        </div>
    );
};

export default RecipeDetails;


import Navbar from "./component/Navbar";
import "./component/style.css";
import React from "react";
import RecipeSearch from "./component/RecipeSearch";
import { Route, Switch } from "react-router-dom";
import RecipeDetails from "./component/RecipeDetails";
function App() {
    return (
        <div className="App">
            <Navbar />
            <Switch>
                <Route exact path="/RecipeSearch" component={RecipeSearch} />
                <Route exact path="/" component={RecipeSearch} />
            </Switch>
        </div>
    );
}

export default App;