In user dashboard, on ad click, take user to edit page
// components/cards/UserAdCard.js
<Link to={`/user/ad/${ad.slug}`} className="nav-link">
// pages/user/ad/AdEdit.js
import { useEffect, useState } from "react";
import Sidebar from "../../../components/nav/Sidebar";
import { useParams } from "react-router-dom";
import axios from "axios";
export default function AdEdit() {
// state
const [ad, setAd] = useState({
photos: [],
uploading: "",
price: "",
address: "",
bedrooms: "",
bathrooms: "",
carpark: "",
landsize: "",
type: "",
action: "",
title: "",
description: "",
loading: "",
});
// hooks
const params = useParams();
useEffect(() => {
if (params?.slug) fetchAd();
}, [params?.slug]);
const fetchAd = async () => {
try {
const { data } = await axios.get(`/ad/${params.slug}`);
setAd(data.ad); // {ad: {}, related: []}
} catch (err) {
console.log(err);
}
};
return (
<div className="contaienr-fluid">
<Sidebar />
<h1 className="display-1 bg-primary text-light p-5">Edit Ad</h1>
<pre>{JSON.stringify(ad, null, 4)}</pre>
</div>
);
}
// App.js
<Route path="user/ad/:slug" element={<AdEdit />} />