130.md

import { useEffect, useState } from "react"
import ulid from 'ulid'
import axios from 'axios'

// const Item = ({ item, role }) => (

// )

// const ItemList = ({ list, role }) => (  
// )

// const ItemMatrix = ({ matrix, role }) => (
// )

// const Main = ({ data }) => {
//}

const fetchAPI = async (uri) => {
  const res = await axios.get(uri)
  return res.data
}

const Header = props => (
  <header>
    <h1>{props.children}</h1>
    <p>{props.subtitle}</p>
  </header>
)

const Home = props => {
  const URI = 'http://localhost:3000/api/book'
  const [data, setData] = useState(null)
  useEffect(() => {
    fetchAPI(URI).then(setData)
  }, [])
  if (!data) return null
  return (
    <>
      <Header subtitle='subtitle'>MoneyBook</Header>
      <Main data={data} />
    </>
  )
}

export default Home

todo.jsx

import { useState, useEffect } from 'react'
import axios from 'axios'

const URI = 'https://jsonplaceholder.typicode.com/todos/'
const fetchAPI = async (uri) => {
  const data = await axios.get(uri)
  return data.data
}

const ItemList = ({ list }) => (
  <tr key={list.id}>
    <td>{list.title}</td>
    <td><input type='checkbox' checked={list.completed} /></td>
  </tr>
)

const Main = ({ data }) => {
  const headings = Object.keys(data[0]).slice(2)

  return (
    <table>
      <thead>
        {headings.map(heading => <th>{heading}</th>)}
      </thead>
      <tbody>
        {
          data.map(list => <ItemList list={list} />)
        }
      </tbody>
    </table>
  )
}

const Home = props => {
  const [data, setData] = useState(null)
  useEffect(
    () => {
      fetchAPI(URI).then(setData)
    }, []
  )
  if (!data) return null
  return (
    <>
      <h1>todos</h1>
      <Main data={data} />
    </>
  )
}
export default Home