79674369

Date: 2025-06-21 11:11:32
Score: 6 🚩
Natty:
Report link

My comment from above:

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.

Reasons:
  • Blacklisted phrase (1): did not work
  • Blacklisted phrase (0.5): upvote
  • RegEx Blacklisted phrase (2.5): Please provide
  • RegEx Blacklisted phrase (2): downvote
  • Long answer (-1):
  • Has code block (-0.5):
  • User mentioned (1): @estus-flask
  • Low reputation (0.5):
Posted by: Huhngut