import { useEffect, useState } from 'react'

export default function App() {
  const [books, setBooks] = useState([])

  useEffect(() => {
    fetch('/odata/v4/{{#isJava}}CatalogService{{/isJava}}{{^isJava}}catalog{{/isJava}}/Books')
      .then(r => r.json())
      .then(r => setBooks(r.value))
  }, [])

  return (
    <>
      <h1>Books</h1>
      <table>
        <tbody>
          {books.map(b => (
            <tr key={b.ID}>
              <td>
                <span className="title">{b.title}</span>{{^isJava}}
                <span className="author"><i> by {b.author}</i></span>{{/isJava}}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </>
  )
}