My comment from above:
The cards need to be removed from the dependency array so the useEffect is executed only once. Otherwise you say that useEffect should be updated whenever cards changes but the useEffect will also update cards so it creates an infinite loop.
You stated above that you changed the dependency array and it did not work. You also pass setCards to your list component. Probably your list component changes cards which causes your FavoriteHikes to be rendered again. This then renders your List component again which will in fact change cards again and create another infinite loop
I created you a working example you can play around with below.
If you want to elaborate on why you passed setCards to your List component I can help you further
import { useState, useEffect } from 'react'
function List({ cards }) {
return <ul>
{cards.map((card) => (
<li key={card.id}>
<h2>{card.name}</h2>
<p>{card.location}</p>
<p>Length: {card.miles} miles</p>
</li>
))}
</ul>
}
function App() {
const [cards, setCards] = useState([]);
useEffect(() => {
const asyncFunction = async () => {
const response = await fetch("https://67f56264913986b16fa4640a.mockapi.io/hikes")
const data = await response.json()
const filteredData = data.filter((data) => data.favorite == true);
setCards(filteredData)
}
asyncFunction()
}, [])
return (
<div id="favorite-hikes-div">
<div>Navbar</div>
<h1 id="favorites-header">Favorite Hikes</h1>
<List
cards={cards}
/>
<div>Footer</div>
</div>
)
}
export default App
You are a new user and got some downvotes which is probably frustrating. As @estus-flask mentioned you do not have a minimal working example. Please provide one that means something similar to what I have above. It should include a main component, your list components and remove unnecessary components like NavBar and footer and replace them with empty divs or remove them entirely. Otherwise your question is great. it has a somewhat fitting title, you described what you tried in the past and your problem is clear. If you add this mve I will give you an upvote.