How send id category in link React? - reactjs

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;

Answer 2

If you need to send a category id, then an incredibly easy way is to send it as part of the path URL.
Create a route in your Router that handles path="/categories/edit/:id". Then construct the appropriate path for the link when mapping.
{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/${category.id}`}}>
Edit
</Link>
</td>
<td>
<Button
variant={'danger'}
onClick={deleteCategoryHandler}
data-id={category._id}
>
Delete
</Button>
</td>
</tr>
)
})}
On the receiving route's component the id parameter can be accessed via match object using the useParams react hook from react-router-dom.
const { id } = useParams();

Answer 3

Add category id variable in your link.
{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/ID/${category._id}`}}>Edit</Link></td>
<td><Button variant={'danger'} onClick={deleteCategoryHandler} data-id={category._id}>Delete</Button></td>
</tr>
)
})}
In your hook Component use useParam() to get category id
import {useParams} from "react-router-dom";
const YourComponent = (props) => {
let { ID } = useParams();
...
}