Use ant design Modal component to allow users to edit the category.

Client

• Create a state to toggle visibility of modal

  // state to udpate category
  const [visible, setVisible] = useState(false);
  const [updatingCategory, setUpdatingCategory] = useState({});

• Toggle visibility and put clicked category in state for updating

  const handleEdit = async (item) => {
    setVisible(true);
    setUpdatingCategory(item);
  };

• Create UpdateCategoryModal component

// components/modal/UpdateCategoryModal
import React, { useState, useEffect } from "react";
import { Modal, Button, Form, Input } from "antd";
import { EditOutlined } from "@ant-design/icons";

const UpdateCategoryModal = ({
  visible,
  setVisible,
  handleUpdate,
  loading,
  updatingCategory,
}) => {
  const [form] = Form.useForm();
  // Ant design form input default values and clear values
  return (
    <>
      <Modal
        title="Update Category"
        visible={visible}
        form={form}
        onOk={() => setVisible(false)}
        onCancel={() => setVisible(false)}
        footer={null}
      >
        <Form
          onFinish={handleUpdate}
          fields={[
            {
              name: ["name"],
              value: updatingCategory.name,
            },
          ]}
        >
          <Form.Item
            name="name"
            rules={[
              {
                required: true,
                message: "Name is required",
              },
            ]}
            hasFeedback
          >
            <Input prefix={<EditOutlined />} placeholder="Name" />
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit" loading={loading}>
              Update
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

export default UpdateCategoryModal;

• Now import UpdateCategoryModal component in /admin/category/index and pass all the necessary props

<UpdateCategoryModal
    visible={visible}
    setVisible={setVisible}
    handleUpdate={handleUpdate}
    loading={loading}
    updatingCategory={updatingCategory}
/>

• Write a function that will send update category request to backend

const handleUpdate = async (values) => {
    console.log(values);
    try {
      const { data } = await axios.put(
        `category/${updatingCategory.slug}`,
        values
      );
      const newCategories = categories.map((cat) => {
        if (cat._id === data._id) {
          return data;
        }
        return cat;
      });
      setCategories(newCategories);
      toast.success("Categories updated");
      setVisible(false);
      setUpdatingCategory({});
    } catch (err) {
      console.log(err);
      toast.error("Category update failed");
    }
  };

Server

// route
router.get("/category/:slug", singleCategory);

// controller
export const singleCategory = async (req, res) => {
  try {
    const category = await Category.findOne({
      slug: req.params.slug,
    });
    res.json(category);
  } catch (err) {
    console.log(err);
  }
};