David Venegas
David Venegas

Reputation: 89

Can't fetch API data onSubmit

I'm building a recipe search page with React. There are two components - Navbar and Home. The Navbar takes in the search query and the Home renders the data.

The API call works fine and the recipes render as needed. The issue I'm having is whenever the user types anything in the search bar, my fetch call fires - but I need the request to fire only when the submit button is pressed.

Here's the code: (I'm using App.js as the intermediary between the two components because they're siblings)


NAVBAR

function Navbar({ setInput, handleSubmit }) {

  return (
  // Step 1 - User inputs query
     <form onSubmit={handleSubmit}>
       <input onChange={(e) => setInput(e.target.value)} />
       <button type="submit">SUBMIT</button>
     </form>
  )
}

APP.JS

function App() {
  const [input, setInput] = useState('')

  const handleSubmit = (e) => {
    e.preventDefault()
    navigate('/home')
  };

  return (
  // Step 2 - App handles exchange
    <Navbar setInput={setInput} handleSubmit={handleSubmit} />
    <Home input={input} handleSubmit={handleSubmit} />
  )
}

HOME

function Home({ input, handleSubmit }) {

useEffect(() => {
        axios.get(`www.recipeAPI/${input}`)
        .then(res => //render recipes with res)
    }, [handleSubmit]);


  return (
    // Step 3 - fetch call data gets rendered
  )
}

I've tried all kinds of hooks and listeners but nothing seems to stop the API from calling everytime a user types.

I appreciate the help in advance :/

Upvotes: 1

Views: 275

Answers (2)

Aviad
Aviad

Reputation: 34

I think that due to the fact your input is inside a state in App.js, every time you change it the page rerenders.

Try to move this line into Navbar:

const [input, setInput] = useState('')

Alternatively, you can use tempInput in your Navbar, and send the tempInput to your App.js with setInput once you handle the submit.

So in your Navbar you will have:

const [tempInput, setTempInput] = useState('')

And when you handle to original state you need to provide:

setInput(tempInput)

Upvotes: 1

Kalle
Kalle

Reputation: 160

I am not sure, but I think removing the [handleSubmit] of the use effect will fix your issue.

useEffect(() => {
        axios.get(`www.recipeAPI/${input}`)
        .then(res => //render recipes with res)
    });

Upvotes: 1

Related Questions