React fetchのサンプル

// pages/fetch.tsx
import React, { useEffect, useState } from 'react'

const FetchPage = () => {
  const [data, setData] = useState(null)

  useEffect(() => {
    async function fetchData() {
      const url = 'https://jsonplaceholder.typicode.com/todos/1'

      try {
        const response = await fetch(url)

        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`)
        }

        const result = await response.json()
        setData(result)
      } catch (error) {
        console.error(`Failed to fetch data: ${error}`)
      }
    }

    fetchData()
  }, [])

  return (
    <div>
      <h1>JSONPlaceholder Data:</h1>
      {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : <p>Loading...</p>}
    </div>
  )
}

export default FetchPage