reactjs - How send id category in link React?

Question

I have page where I display all categories with this code

{categories.map((category, index) => {
            return(
              <tr key={index}>
                <th scope="row">{index}</th>
                <td>{category.name}</td>
                <td>50</td>
                <td><Link to={{pathname: `/categories/edit/`}}>Edit</Link></td>
                <td><Button variant={'danger'} onClick={deleteCategoryHandler} data-id={category._id}>Delete</Button></td>
              </tr>
            )
          })}

But when I create Component edit Category, and there I Need send with id. which will be better ID and name?

Answer 1

you need to do this:

categories.map((category, index) => {
  const location = {
    pathname: `/categories/edit/`,
    state: {
      category,
    },
  };
  return (
    <tr key={index}>
      <th scope="row">{index}</th>
      <td>{category.name}</td>
      <td>50</td>
      <td>
        <Link
          to={location}
        >
          Edit
        </Link>
      </td>
      <td>
        <Button
          variant={"danger"}
          onClick={deleteCategoryHandler}
          data-id={category._id}
        >
          Delete
        </Button>
      </td>
    </tr>
  );
});

and in the destination component just use something like this to get location object and then its state property:

const location = useLocation();

const category = location?.state?.category;