How can i pass my ID value to next component?-CodePudding

I am new to react can someone tell me how can i access my ID of the box in edit button component so, that i can populate my fields in edit component from database?

const columns = [
  {
    title: "ID", //this is the ID
    dataIndex: "boxId",
    key: "boxId",
  },
  {
    title: "Product Name",
    dataIndex: "name",
    key: "productName",
  },
  {
    title: "Avatar",
    dataIndex: "photoPath",
    key: "avatar",
    render: (src) => <img src={src} alt="" width="80px" height="60px" />,
  },
  {
    title: "Box Sets",
    dataIndex: "numberOfBox",
    key: "boxSets",
  },
  {
    title: "Box Type",
    dataIndex: "boxType",
    key: "boxType",
    render: () => (
      <div>
        <br />
        <Button type="dashed">Reward</Button>
      </div>
    ),
  },
  {
    title: "Sort Value",
    dataIndex: "status",
    key: "sortValue",
  },
  {
    title: "State",
    dataIndex: "status",
    key: "state",
    render: (value) => <Tag color="blue">{value}</Tag>,
  },
  {
    title: "Time",
    dataIndex: "updatedTime",
    key: "time",
  },

  {
    title: "Operations",
    key: "operations",
    render: () => (
      <Row gutter={10}>
        <Col>
          <Link to="/gift-management/edit-box/:boxId"> //This what i am trying to pass to next component
            <Button type="primary" icon={<EditOutlined />}>
              Edit
            </Button>
          </Link>
        </Col>
        <Col>
          <ChangeState />
        </Col>
        <Col>
          <Link to="/gift-management/box-items">
            <Button icon={<ContainerOutlined />}>Box Items</Button>
          </Link>
        </Col>
        <Col>
          <DeleteBox />
        </Col>
      </Row>
    ),
  },
];

I am trying to access boxID in my edit Box component so that i can get data from my database and repopulate fields for editing option.on other form i am using formik and trying to populate its fields from database.

CodePudding user response：

use the param value in the render method

 render: (param) => (
      <Row gutter={10}>
        <Col>           
          <Link to={`/gift-management/edit-box/${param.data.boxId}`}>

Demo