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 :/
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)
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)
});