Работает отображение предметов

src/components/grouptablerow/grouptablerow.jsx

@@ -0,0 +1,16 @@
+import { PropTypes } from "prop-types";
+
+const GroupTableRow = ({ group }) => {
+    return (
+        <tr>
+            <th scope='row'>{group.id}</th>
+            <td>{group.name}</td>
+        </tr>
+    );
+};
+
+GroupTableRow.propTypes = {
+    group: PropTypes.object
+};
+
+export default GroupTableRow;

src/components/subjecttablerow/subjecttablerow.jsx

@@ -0,0 +1,16 @@
+import { PropTypes } from "prop-types";
+
+const SubjectTableRow = ({ subject }) => {
+    return (
+        <tr>
+            <th scope='row'>{subject.id}</th>
+            <td>{subject.name}</td>
+        </tr>
+    );
+};
+
+SubjectTableRow.propTypes = {
+    subject: PropTypes.object
+};
+
+export default SubjectTableRow;

src/hooks/SubjectsHook.js

@@ -0,0 +1,22 @@
+import { useEffect, useState } from "react";
+import SubjectsApiService from "../services/SubjectsApiService";
+
+export const useSubjects = () => {
+    const [subjectsRefresh, setSubjectsRefresh] = useState(false);
+    const [subjects, setSubjects] = useState([]);
+    const handleSubjectsRefresh = () => setSubjectsRefresh(!subjectsRefresh);
+
+    const getSubjects = async () => {
+        const data = await SubjectsApiService.getAll();
+        setSubjects(data ?? []);
+    };
+
+    useEffect(() => {
+        getSubjects();
+    }, [subjectsRefresh]);
+
+    return {
+        subjects,
+        handleSubjectsRefresh,
+    };
+};

src/pages/SubjectsPage/SubjectsPage.jsx

@@ -1,11 +1,29 @@
+import { useSubjects } from "../../hooks/SubjectsHook";
 import { useOnlyTeachers } from "../../hooks/UserHooks";
+import { Container } from "react-bootstrap";
+import SubjectTableRow from "../../components/subjecttablerow/subjecttablerow";
 
 const SubjectsPage = () => {
     useOnlyTeachers();
+    const { subjects, handleSubjectsChange } = useSubjects();
 
     return (
         <>
-            <h5>SubjectsPage</h5>
+            <Container>
+                <table className="table">
+                    <thead>
+                        <tr>
+                            <th scope="col">ID</th>
+                            <th scope="col">Название</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {
+                            subjects.map((subject, index) => <SubjectTableRow key={index} subject={subject} />)
+                        }
+                    </tbody>
+                </table>
+            </Container>
         </>
     );
 };