Ads for sell, list as Buy
// components/nav/Main.js
<li>
<NavLink className="nav-link" to="/buy">
Buy
</NavLink>
</li>
<li>
<NavLink className="nav-link" to="/rent">
Rent
</NavLink>
</li>
// App.js
<Route path="/buy" element={<AdsForSell />} />
<Route path="/rent" element={<AdsForRent />} />
// pages/AdsForSell.js
import { useState, useEffect } from "react";
import { useAuth } from "../context/auth";
import axios from "axios";
import AdCard from "../components/cards/AdCard";
export default function AdsForSell() {
const [ads, setAds] = useState([]);
useEffect(() => {
fetchAds();
}, []);
const fetchAds = async () => {
try {
const { data } = await axios.get("/ads-for-sell");
setAds(data);
} catch (err) {
console.log(err);
}
};
return (
<div>
<h2 className="display-1 bg-primary text-light p-5 h1">For Sell</h2>
<div className="container">
<div className="row">
{ads?.map((ad) => (
<AdCard ad={ad} key={ad._id} />
))}
</div>
</div>
</div>
);
}
// pages/AdsForRent.js
import { useState, useEffect } from "react";
import { useAuth } from "../context/auth";
import axios from "axios";
import AdCard from "../components/cards/AdCard";
export default function AdsForRent() {
const [ads, setAds] = useState([]);
useEffect(() => {
fetchAds();
}, []);
const fetchAds = async () => {
try {
const { data } = await axios.get("/ads-for-rent");
setAds(data);
} catch (err) {
console.log(err);
}
};
return (
<div>
<h2 className="display-1 bg-primary text-light p-5 h1">For Rent</h2>
<div className="container">
<div className="row">
{ads?.map((ad) => (
<AdCard ad={ad} key={ad._id} />
))}
</div>
</div>
</div>
);
}