Render list of categories

Use ant design's List component to render list of categories

Server

// route
router.get("/categories", read);
// controller
exports.read = async (req, res) => {
  try {
    const categories = await Category.find().sort({ createdAt: -1 });
    res.json(categories);
  } catch (err) {
    console.log(err);
  }
};

Client

// pages/admin/categories/index
import { useState, useEffect } from "react";
import AdminLayout from "../../../components/layout/AdminLayout";
import { Row, Col, Typography, Form, Input, Button, List } from "antd";
import { EditOutlined } from "@ant-design/icons";
import axios from "axios";
import toast from "react-hot-toast";

const Categories = () => {
  // state
  const [loading, setLoading] = useState(false);
  const [categories, setCategories] = useState([]);
  // hooks
  const [form] = Form.useForm();

  useEffect(() => {
    const getCategories = async () => {
      try {
        const { data } = await axios.get("/categories");
        console.log(data);
        setCategories(data);
      } catch (err) {
        console.log(err);
      }
    };
    // execute
    getCategories();
  }, []);

  const onFinish = async (values) => {
    try {
      console.log(values);
      setLoading(true);
      const { data } = await axios.post("/category", values);
      setCategories([...categories, data]);
      form.resetFields(["name"]);
      setLoading(false);
      toast.success("Category created successfully");
    } catch (err) {
      toast.error("Duplicate error. Try different name.");
      console.log(err);
      setLoading(false);
    }
  };

  const handleEdit = (item) => {
    console.log("edit", item);
  };

  const handleDelete = (item) => {
    console.log("delete", item);
  };

  return (
    <AdminLayout>
      <Row>
        <Col sm={22} lg={10} offset={1}>
          <h2>Categories</h2>

          <p>Add New Category</p>

          <Form onFinish={onFinish} form={form}>
            <Form.Item
              name="name"
              rules={[
                {
                  required: true,
                  message: "Please give it a name!",
                },
              ]}
              hasFeedback
            >
              <Input prefix={<EditOutlined />} placeholder="Name" />
            </Form.Item>

            <Form.Item>
              <Button type="primary" htmlType="submit" loading={loading}>
                Create
              </Button>
            </Form.Item>
          </Form>
        </Col>
        <Col sm={22} lg={10} offset={1}>
          <List
            itemLayout="horizontal"
            dataSource={categories}
            renderItem={(item) => (
              <List.Item
                actions={[
                  <a onClick={() => handleEdit(item)}>edit</a>,
                  <a onClick={() => handleDelete(item)}>delete</a>,
                ]}
              >
                <List.Item.Meta title={item.name} />
              </List.Item>
            )}
          />
          List {JSON.stringify(categories, null, 4)}
        </Col>
      </Row>
    </AdminLayout>
  );
};

export default Categories;

View in small screen size