How to pass id from page to another? [duplicate] - reactjs

Question

This question already has answers here:
How to pass data from a page to another page using react router
(5 answers)
Closed 5 months ago.
I have 2 pages: (Datatable.jsx and Single.jsx).
I need to send id from Datatable.jsx to Single.jsx. After googling, i found that i can do that by using the <Link /> component, like this:
<Link
to={{
pathname: "/page",
state: data
}}
>
And then you can access the desired sent data to the second page:
render() {
const { state } = this.props.location
return (
// render logic here
)
}
I dont know how to apply this on my two pages:
Datatable.jsx:
//...
const Datatable = () => {
const [data, setData] = useState([]);
const handleDelete = (id) => {
setData(data.filter((item) => item.id !== id));
fetch(`https://api.factarni.tn/article/${id}`, {
method: "DELETE",
headers: {
Authorization:
"Bearer eyJhbGciOiJS...qw2QWltkyA",
},
}).then((response) => response.json());
};
useEffect(() => {
fetch("https://api.factarni.tn/article", {
method: "GET",
headers: {
Authorization:
"Bearer eyJhbGciOiJSUz...WltkyA",
},
})
.then((response) => response.json())
.then((json) => setData(json));
}, []);
const actionColumn = [
{
field: "action",
headerName: "Action",
width: 200,
renderCell: (params) => {
return (
<div className="cellAction">
<Link to="/users/test" style={{ textDecoration: "none" }}>
<div className="viewButton">Modifier</div>
</Link>
<div
className="deleteButton"
onClick={() => handleDelete(params.row.id)}
>
Delete
</div>
</div>
);
},
},
];
return (
<div className="datatable">
<div className="datatableTitle">
Add New Article
<Link to="/users/new" className="link">
<AddBusinessIcon className="icon" /> Add Article
</Link>
</div>
<DataGrid
className="dataGrid"
rows={data}
columns={userColumns.concat(actionColumn)}
pageSize={9}
rowsPerPageOptions={[9]}
checkboxSelection
/>
</div>
);
};
export default Datatable;
Single.jsx:
//...
const Single = ({ inputs, title }) => {
const [data, setData] = useState({
code: "",
article: "",
price: 0,
vat: 0,
status: 0,
company_id: 0,
});
const normalize = (v) => ({
code: v.code,
article: v.article,
price: Number(v.price),
vat: Number(v.vat),
status: Number(v.status),
company_id: Number(v.company_id),
});
function handle(e) {
const newdata = { ...data };
newdata[e.target.id] = e.target.value;
setData(newdata);
console.log(newdata);
}
const handleClick = async (e) => {
e.preventDefault();
const body = normalize(data);
await fetch("https://api.factarni.tn/article/create", {
method: "PUT",
body: JSON.stringify(body),
headers: {
"Content-Type": "application/json",
Authorization:
"Bearer eyJhbGciOiJ...w2QWltkyA",
},
});
};
return (
<div className="New">
<Sidebar />
<div className="newContainer">
<Navbar />
<div className="top">
<h1>{title}</h1>
</div>
<div className="bottom">
<div className="right">
<form>
<div className="formInput"></div>
{inputs.map((input) => (
<div className="formInput" key={input.id}>
<label>{input.label} </label>
<input
type={input.type}
placeholder={input.placeholder}
onChange={(e) => handle(e)}
id={input.label}
name={input.label}
value={input.label}
/>
</div>
))}
<button onClick={handleClick}>Update</button>
</form>
</div>
</div>
</div>
</div>
);
};
export default Single;

Answer 1

In the Database.jsx:
// ... code
<Link to={{ pathname: "/users/test", state: { id: params.row.id }}} style={{ textDecoration: "none" }}>
<div className="viewButton">Modifier</div>
</Link>
// ... code
In the Single.jsx:
import { useLocation } from 'react-router-dom';
// ... later in render function
const { state } = useLocation() // state.id should have your id

Answer 2

Although #deaponn's answer is good, you can also use the useNavigate hook and pass the id, name or any data in the state like below, using programmatic approach rather than Link component exported from react-router library
import { useNavigate } from "react-router-dom";
const navigate = useNavigate();
navigate('/(url on which you want to navigate)', { state: { id:1,name:encryptedId} });
On the navigated component, if you want to retrieve the passed id or name, you can use the useLocation hook as below:
import { useLocation } from "react-router-dom";
const location = useLocation();
var ttid = location.state.id;