book.js

const handler = (req, res) => {
  const json = {
    headings: [
      '日付',
      '項目',
      '入金',
      '出金'
    ],
    values: [
      {
        id: '1',
        date: '1/1',
        item: 'お年玉',
        income: '10000',
        payment: ''
      },
      {
        id: '2',
        date: '1/3',
        item: 'ケーキ',
        income: '',
        payment: '500'
      },
      {
        id: '3',
        date: '2/1',
        item: '小遣い',
        income: '3000',
        payment: ''
      },
      {
        id: '4',
        date: '2/5',
        item: '漫画',
        income: '',
        payment: '600'
      }
    ]
  }
  res.status(200).json(json)
}
export default handler

test.jsx

import axios from "axios";
import { useState, useEffect } from "react"

const baseURL = "http://localhost:3000/api/book"

const getPost = async (uri) => {
  const response = await axios.get(uri)
  return response.data
}

const Title = props => (
  <header>
    <h1>{props.children}</h1>
  </header>
)

const THead = ({ headings }) => (
  <p>{JSON.stringify(headings)}</p>
)

const TBody = ({ values }) => (
  <p>{JSON.stringify(values)}</p>
)

const Table = ({ book }) => (
  <table>
    <THead headings={book.headings} />
    <TBody values={book.values} />
  </table>
)

const App = () => {
  const [post, setPost] = useState(null)

  useEffect(() => {
    getPost(baseURL).then(setPost)
  }, [])

  if (!post) return null

  return (
    <>
      <Title>moneybook</Title>
      <Table book={post} />
    </>
  )
}

export default App