I am unable to fetch different values from API except for “chicken”

Question

As the query will fetch the value that is provided in useState. But I want the search bar to search for recipes provided by me. Can anybody help me on how I can do that.

import React, { useEffect, useState } from 'react';
import Recipe from './Recipe';
import './App.css';

const App = ()=>{

  const APP_ID= '2*****'
  const APP_KEY= 'f******************'
 
  const [recipes, setRecipes] = useState([]);
  const [search, setSearch] = useState("");
  const [query, setQuery] = useState('chicken');


  useEffect(() =>{
    const getRecipes = async()=>{
      const response = await fetch(`https://api.edamam.com/search?q=${query}&app_id=${APP_ID}&app_key=${APP_KEY}`);
      const data = await response.json();
      setRecipes(data.hits)
        };
        getRecipes();
  },[query]);

 
  const updateSearch = e=>{
    setSearch(e.target.value);
    
  }
  const getSearch = e =>{
    
    setQuery(search);
    setSearch('');
  }  

  return(
    
    <div className="App">
      <form  onSubmit={getSearch} className="search-form"> 
        <input className="search-bar" type="text" value={search} onChange={updateSearch} />
          
          <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}
        image={recipe.recipe.image} />

      ))}
    </div>
    
  )
}

export default App;

Answer 1

• don't create multiple states for the same thing.
• pass search string to the fetch API

import React, { useState, useEffect } from "react";
import "./styles.css";

const App = () => {
  const APP_ID = "2***********";
  const APP_KEY = "f*********";

  const [recipes, setRecipes] = useState([]);
  const [search, setSearch] = useState("");

  useEffect(() => {
    try {
      const getRecipes = async () => {
        const response = await fetch(
          `https://api.edamam.com/search?q=${search}&app_id=${APP_ID}&app_key=${APP_KEY}`
        );
        const data = await response.json();
        setRecipes(data.hits);
      };
      getRecipes();
    } catch (error) {
      // handle error here
      console.error(error);
    }
  }, [search]);

  const updateSearch = (e) => {
    setSearch(e.target.value);
  };

  const getSearch = (e) => {
    setSearch("");
  };

  return (
    <div className="App">
      <form onSubmit={getSearch} className="search-form">
        <input
          className="search-bar"
          type="text"
          value={search}
          onChange={updateSearch}
        />

        <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}
          image={recipe.recipe.image}
        />
      ))}
    </div>
  );
};

export default App;

edit:

If initially, you want to have chicken results from API, change the response variable to this:

        const response = await fetch(
          `https://api.edamam.com/search?q=${search || "chicken"}&app_id=${APP_ID}&app_key=${APP_KEY}`
        );