import React, { useEffect, useState} from 'react';
import './App.css';
import Recipe from './recipe';
const App= ()=>
{
const [recipes, setRecipes] = useState([]);
const APP_ID = "********";
const APP_KEY = "*********";
useEffect(() => {
getRecipes();
},[]);
const getRecipes = async ()=>
{
const response = await fetch('https://api.edamam.com/search?q=chicken&app_id='+APP_ID+'&app_key='+APP_KEY);
const data =await response.json();
setRecipes(data.hits);
console.log(data.hits);
}
return(
<div className="App" >
<form className="serach-form">
<input className="search-bar" type="text"/>
<button
className="search-button"
type="submit"
> Search</button>
</form>
{recipes.map(recipe=>(
<Recipe
key={recipe.recipe.label}
title={recipe.recipe.label}
calories = {recipe.recipe.calories}
imgurl={recipe.recipe.image}/>
))}
</div>
)
}
export default App;
I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>
) will also add backticks around text.
Note: Backticks are not single quotes.
Where is this being run? The code looks basically ok, but you’re trying to run it in some environment that doesn’t recognise standard JS, without knowing that can’t really tell you how to make it work
thanks , i will check next time
I have created React App , run on cmd terminal as “npm start” ,my code is ok and i am getting expected output but my vs code editor warning me so!
It’s a lint warning, you’ve likely set up your editor with something old like JSLint. If that’s the case uninstall it and install ESLint.