import {useEffect, useState} from 'react'

function App() {
  const [products, setProducts] = useState([])
  const [isLoading, setIsLoading] = useState(false)

  useEffect(() => {
    setIsLoading(true)
    fetch('/dummydata.json')
    .then((response) => { return response.json()})
    .then((data) => {
      setProducts(data.products)
      setIsLoading(false)
    })
  }, [])

  if (isLoading) {
    return <p>Loading...</p>
  }

  return (
    <ul>
      {products.map(() => {
        <li key={products.id}>{products.title}</li>
      })}
    </ul>
  )

}

export default App