function ChapterList({
  chapters,
  isLoading = false,
  selectedChapter,
  onSelectChapter,
  onUseChapter,
}) {
  const columns = [
    {
      label: 'Title',
    },
    {
      label: 'Page',
      classes: 'ChapterList__page-heading',
    },
  ];

  return (
    <Table
      accessibleLabel="Table of Contents"
      classes="ChapterList"
      tableHeaders={columns}
      isLoading={isLoading}
      items={chapters}
      onSelectItem={onSelectChapter}
      onUseItem={onUseChapter}
      selectedItem={selectedChapter}
      renderItem={chapter => (
        <>
          <td aria-label={chapter.title}>{chapter.title}</td>
          <td>{chapter.page}</td>
        </>
      )}
    />
  );
}
/**
 * Component that presents a list of chapters from a book and allows the user
 * to choose one for an assignment.
 *
 * @param {ChapterListProps} props
 */
Component that presents a list of chapters from a book and allows the user
to choose one for an assignment.


Component that presents a list of chapters from a book and allows the user to choose one for an assignment .
function ChapterList({
  chapters,
  isLoading = false,
  selectedChapter,
  onSelectChapter,
  onUseChapter,
}) {
  const columns = [
    {
      label: 'Title',
    },
    {
      label: 'Page',
      classes: 'ChapterList__page-heading',
    },
  ];
  return (
    <Table
      accessibleLabel="Table of Contents"
      classes="ChapterList"
      tableHeaders={columns}
      isLoading={isLoading}
      items={chapters}
      onSelectItem={onSelectChapter}
      onUseItem={onUseChapter}
      selectedItem={selectedChapter}
      renderItem={chapter => (
        <>
          <td aria-label={chapter.title}>{chapter.title}</td>
          <td>{chapter.page}</td>
        </>
      )}
    />
  );
}
function ChapterList ( { chapters , isLoading = false , selectedChapter , onSelectChapter , onUseChapter , } ) { const columns = [ { label : 'Title' , } , { label : 'Page' , classes : 'ChapterList__page-heading' , } , ] ; return ( < Table accessibleLabel = "Table of Contents" classes = "ChapterList" tableHeaders = { columns } isLoading = { isLoading } items = { chapters } onSelectItem = { onSelectChapter } onUseItem = { onUseChapter } selectedItem = { selectedChapter } renderItem = { chapter => ( < > < td aria-label = { chapter . title } > { chapter . title } < / td > < td > { chapter . page } < / td > < / > ) } / > ) ; }
Component that presents a list of chapters from a book and allows the user
 to choose one for an assignment.
Component that presents a list of chapters from a book and allows the user to choose one for an assignment .