first.jsx

/*
Baseとなるjsx
*/

const MoneyBook = props => {
  return (
    <>
      <h1>お小遣い帳</h1>
      <table>
        <thead>
          <tr>
            <td>日付</td>
            <td>項目</td>
            <td>入金</td>
            <td>出金</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1/1</td>
            <td>お年玉</td>
            <td>10000</td>
            <td></td>
          </tr>
          <tr>
            <td>1/3</td>
            <td>ケーキ</td>
            <td></td>
            <td>-500</td>
          </tr>
          <tr>
            <td>2/1</td>
            <td>小遣い</td>
            <td>3000</td>
            <td></td>
          </tr>
          <tr>
            <td>2/5</td>
            <td>漫画</td>
            <td></td>
            <td>-600</td>
          </tr>
        </tbody>
      </table>
    </>
  )
}

export default MoneyBook

globals.css

.book {
  border-collapse: collapse;
  width: 300px;
}

.book tr>th,
.book tr>td {
  border: solid 1px black;
  padding: 1px 15px;
}

.entry {
  margin-top: 20px;
  width: 300px;
}

.entry input[type="submit"] {
  margin-top: 10px;
  width: 60px;
  font-size: 120px;
}

.entry input[type="redio"] {
  margin-left: 40px;
  margin-bottom: 10px;
}

second.jsx

/*
  データと構造の分離
*/

const data = {
  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' }
  ]
}

const MoneyBook = props => {
  return (
    <div className='books'>
      <h1>お小遣い帳</h1>
      <table>
        <thead>
          <tr key='headings'>
            {data.headings.map(col => (
              <td key={col}>{col}</td>
            ))}
          </tr>
        </thead>
        <tbody>
          {
            data.values.map(o =>
              <tr key={o.id}>
                {Object.values(o).slice(1).map(col => (
                  <td key={o.id + col}>{col}</td>)
                )}
              </tr>
            )
          }
        </tbody>
      </table>
    </div>
  )
}

export default MoneyBook

third.jsx

/*
Hookを使用する, Title, Thead, TRow コンポーネントに分離
*/
import React, { useState } from 'react'

const data = {
  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' }
  ]
}

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

const TRow = (({ headings }) => (
  <tr key='headings'>
    {headings.map(
      col => <td key={col}>{col}</td>
    )}
  </tr>
))

const THead = ({ headings }) => (
  <thead>
    <TRow headings={headings} />
  </thead>
)

const MoneyBook = props => {
  const [books, setbooks] = useState(data)

  return (
    <div className="books">
      <Title>お小遣い帳</Title>
      <table>
        <THead headings={books.headings} />
        <tbody>
          {
            books.values.map(o =>
              <tr key={o.id}>
                {Object.values(o).slice(1).map(col => <td key={o.id + col}>{col}</td>)}
              </tr>
            )
          }
        </tbody>
      </table>
    </div>
  )
}

export default MoneyBook